html 让字体加粗一共有两大主流实现方式,第一种是使用 html 原生语义标签 b 或者 strong,第二种是通过 css 的 fontweight 属性设置加粗,基础考题里面这两种写法都属于正确答案,其中 strong 带有语义含义代表重要内容,b 标签只是单纯视觉加粗没有语义,fontweight 属于纯样式控制,不改变文字语义。浏览器默认给 b 和 strong 标签内置加粗样式,不需要额外写 css 就可以直接显示粗体,如果想要更精细控制加粗程度,比如半粗 特粗这类效果,就必须使用 css 的 fontweight 属性,html 原生标签只能固定粗体,不能调节粗细等级,这是两种方式最大差别。很多新手分不清 b 和 strong,还有 css fontweight 的适用场景,在做网页作业或者考试的时候,经常混淆语义标签和纯样式写法,还会出现样式不生效的问题,本质是没有理解 html 结构和 css 样式分离的规范。
核心方案对照表
| 实现方式 | 写法 | 是否带语义 | 能否调节粗细等级 | 适用场景 |
|---|---|---|---|---|
| b 标签 | 文字 | 无,仅视觉加粗 | 不能 | 单纯想要文字变粗 |
| strong 标签 | 文字 | 有,代表内容重要 | 不能 | 重点内容 推荐语义写法 |
| css fontweight | style fontweight bold | 无,纯样式 | 可以 | 批量统一加粗 精细控制 |
详细使用步骤
第一种 使用 b 标签实现字体加粗
b 是双标签,把需要加粗的文字包裹在 b 标签内部,保存页面刷新之后文字自动变成粗体,写法简单,适合基础作业。
示例
这是需要加粗的文字
第二种 使用 strong 标签实现字体加粗strong 同样是双标签,视觉效果和 b 标签一致,但是语义上表示这段文字是重点重要内容,现在标准前端规范更推荐优先使用 strong,对搜索引擎和屏幕阅读器更加友好。
示例
这是重点加粗文字
第三种 使用 css fontweight 属性实现字体加粗fontweight 属性支持多个取值,bold 代表加粗,normal 代表恢复正常粗细,也可以填写数字 100 到 900,数字越大字体越粗,700 等价于 bold,400 等价于 normal。
可以写成行内样式,也可以写在内部 style 样式表或者外部 css 文件。
行内样式示例
这段文字通过css实现加粗
内部样式表示例
.textbold{
fontweight bold
}
使用类名调用加粗样式
深度补充知识点
语义和样式分离原则,现代前端规范提倡 html 只负责结构,css 负责样式,如果只是单纯视觉加粗,优先使用 css fontweight,如果是内容本身具备重要含义,使用 strong 标签,b 标签属于旧写法,现在很多教材依旧保留,考试答题可以正常写。
样式失效排查,如果写了 fontweight bold 但是文字没有变粗,优先检查是不是有其他更高优先级样式覆盖,或者父级标签本身设置了 fontweight normal,还有部分特殊字体本身没有粗体字库,就算设置 bold 也不会出现加粗效果,这个是很容易忽略的坑。
补充区分,h1 到 h6 标题标签本身默认就是加粗效果,不需要额外再加 b 标签或者 fontweight,标题标签自带粗体,很多初学者重复设置造成冗余代码。
总结,html 让字体加粗,简单作业可以直接用 b 或者 strong 标签,需要精细控制粗细或者批量统一加粗,使用 css fontweight 属性,优先记住 strong 语义更好,fontweight 可以用数字调节粗细,做题两种写法都算正确答案。
【常见问题】
问题 1 html 怎么让字体加粗 b 标签和 strong 有什么区别
回答 1 html 怎么让字体加粗,b 标签只是视觉加粗没有语义,strong 标签视觉同样加粗,但是代表内容重要,属于语义标签,标准开发更推荐 strong 写法
问题 2 html 怎么让字体加粗 使用 fontweight 数字和 bold 效果一样吗
回答 2 html 怎么让字体加粗,fontweight 里面 700 数值和 bold 加粗效果等价,400 和 normal 正常粗细等价,还可以设置其他数值实现不同粗细等级,b 标签不能调节粗细
问题 3 html 怎么让字体加粗 设置之后没有生效是什么原因
回答 3 html 怎么让字体加粗设置不生效,常见原因是更高优先级 css 覆盖样式,或者当前字体没有粗体字库,也有可能代码书写错误,检查属性名称和取值是否正确
问题 4 html 怎么让字体加粗 标题标签还需要额外设置吗
回答 4 html 怎么让字体加粗,h1 到 h6 标题标签本身默认自带加粗样式,不需要额外添加 b 标签或者 fontweight 属性,重复设置属于冗余代码
【免责申明】
本文内容仅用于前端基础学习与考试备考参考,不同浏览器以及字体文件对 fontweight 粗细渲染存在细微差异,实际开发请自行测试验证,代码使用产生的相关风险由使用者自行承担。


