html字体不同粗细

HTML标签与CSS属性实现字体粗细

在HTML和CSS中,可以通过多种方式调整字体粗细，主要包括HTML标签、CSS属性以及Web字体选择。

HTML标签直接控制

HTML提供了部分标签用于快速调整字体粗细,但需注意语义化差异：
| 标签 | 作用 | 语义含义 |
|————–|———————-|————————|
| <b> | 加粗文本 | 纯视觉加粗（无语义） |
| <strong> | 加粗文本 | 强调内容（语义化） |
| <em> | 斜体加粗（部分浏览器）| 强调内容（语义化） |

示例：

<p>普通文本，<b>粗体</b>，<strong>语义化粗体</strong></p>

CSS属性 font-weight

CSS的font-weight属性提供更精细的控制权，支持数值（100-900）和关键字：
| 值 | 描述 | 示例效果 |
|————-|————————–|————————|
| normal | 正常粗细（通常400） | Thin |
| bold | 粗体（通常700） | Bold |
| 100–900 | 数值越大越粗（以100为步长）| 100（极细）900（极粗）|
| lighter | 比当前值更轻一档 | |
| bolder | 比当前值更粗一档 | |

示例：

p {
  font-weight: 500; / 中等粗细 /
}
.bold-text {
  font-weight: bold; / 等同于700 /
}

Web字体的粗细变体

自定义Web字体（如通过Google Fonts）可能包含多种粗细变体，需在引入时指定：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
  body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; / 默认使用正常粗细 /
  }
  .thin {
    font-weight: 100; / 需字体支持 /
  }
</style>

字体粗细对比表

相关问题与解答

问题1：如何同时设置字体为粗体和斜体？
解答：结合font-weight和font-style属性：

.bold-italic {
  font-weight: bold;
  font-style: italic;
}

问题2：为什么某些字体无法显示指定的font-weight值？
解答：字体文件可能未包含对应粗细的变体，若字体仅提供400（正常）和700（粗体），则font-weight: 500会降级到最近的可用值（400），需选择支持多权重的字体或使用CSS生成更粗的文本（如text-shadow模拟）。