上一篇
html让字体加粗
要让HTML中的字体加粗，可使用`
标签包裹文本（如 加粗文字 ），或语义化标签，也可通过CSS设置 font-weight:bold;实现更灵活的控制
基础标签实现加粗
| 标签类型 | 语法示例 | 效果说明 |
|---|---|---|
<b> | <b>加粗文字</b> | 纯视觉加粗，无语义强调 |
<strong> | <strong>加粗文字</strong> | 语义化加粗，表示重要内容 |
CSS样式控制加粗
| 实现方式 | 语法示例 | 补充说明 |
|---|---|---|
| 行内样式 | <span style="font-weight:bold;">加粗</span> | 直接定义样式，灵活性高 |
| 类选择器 | <span class="bold-text">加粗</span><style>.bold-text {font-weight:bold;}</style> | 可复用样式，推荐分离CSS |
| ID选择器 | <div id="title">加粗</div><style>#title {font-weight:900;}</style> | 针对特定元素，权重较高 |
其他加粗技巧
- 组合标签：
<p><strong>段落级加粗</strong></p>（继承父元素样式） - 伪类加粗：
<a href="#"><u:hover>{font-weight:800;}</u:hover></a>（鼠标悬停触发） - 继承加粗：通过父元素设置
font-weight:inherit;传递样式
注意事项
- 避免过度使用
<b>标签（SEO友好性差） font-weight取值范围：100(最细)~900(最粗)，bold等价于700- 中文字体建议使用
font-weight:bolder;增强显示效果 - 移动端注意加粗可能导致文字模糊,需测试适配性
相关问题与解答
Q1：<b>和<strong>标签有什么区别？
A1：<b>是纯视觉加粗标签，仅改变文字粗细；<strong>是语义化标签，除加粗外还具有强调含义，搜索引擎会赋予更高权重，开发中优先使用<strong>。
Q2：如何让整个网页的文字默认加粗？
A2：可通过全局CSS设置：
<style>
body {
font-weight: bold; / 全局加粗 /
}
</style>或使用<link>引入外部样式表统一控制，注意全局加粗可能影响可读性，建议局部
