CSS font-weight属性详解：粗细控制与实现原理

CSS 中的 font-weight 属性用于控制文本字形的粗细，是文字排版中非常常用的属性。很多开发者只熟悉 normal 和 bold 两个值，但实际上 font-weight 支持数字权重、关键字以及可变字体范围等多种形式。理解它的工作机制，可以更准确地控制网页字体效果，也能避免设置了 700 却看起来没有明显变化等常见问题。

font-weight属性的基本作用

font-weight 用于指定字体的字重，也就是字形笔画的粗细程度。它不会改变字体大小，主要影响文字本身的视觉重量。

基本语法如下：

CSS
.selector {
    font-weight: value;
}

例如：

CSS
p {
    font-weight: 400;
}

strong {
    font-weight: 700;
}

通常情况下，400 对应普通字重，700 对应粗体，但最终效果还取决于当前使用的字体是否提供对应字重。

常见示例：

CSS
.title {
    font-weight: bold;
}

.description {
    font-weight: normal;
}

也可以使用数字表示：

CSS
.title {
    font-weight: 700;
}

.description {
    font-weight: 400;
}

数字写法在实际项目中更加灵活，特别是在需要使用多种字体粗细或者配合字体设计规范时。

font-weight有哪些常用取值

font-weight 的取值主要可以分为关键字和数字两大类。

normal

normal 表示正常字重，通常对应数值 400。

CSS
body {
    font-weight: normal;
}

在大多数普通字体中，普通正文都会采用这个字重。

bold

bold 表示粗体，通常对应数值 700。

CSS
h1 {
    font-weight: bold;
}

需要注意的是，bold 并不是一个固定的“加粗算法”。浏览器会根据字体本身提供的字重以及字体匹配规则选择合适的字形。

bolder

bolder 表示相对于父元素使用更粗的字重。

例如：

CSS
.parent {
    font-weight: 400;
}

.child {
    font-weight: bolder;
}

它并不是简单地执行“父元素数值 + 100”。浏览器会根据 CSS 字重层级进行匹配。

lighter

lighter 与 bolder 相反，用于选择相对于父元素更细的字重。

CSS
.parent {
    font-weight: 700;
}

.child {
    font-weight: lighter;
}

这种写法适合强调父子元素之间的相对粗细关系，但如果设计稿要求精确控制字重，通常直接使用具体数值更加直观。

数字字重是什么意思

font-weight 可以使用 1 到 1000 的整数值。

CSS
.text-regular {
    font-weight: 400;
}

.text-medium {
    font-weight: 500;
}

.text-semibold {
    font-weight: 600;
}

.text-bold {
    font-weight: 700;
}

.text-heavy {
    font-weight: 800;
}

传统字体体系中经常使用以下对应关系：

需要特别注意，这张表主要用于理解常见字体命名习惯，并不意味着所有字体都完整提供这些字重。

例如某款字体只有 Regular 和 Bold 两套字体文件，那么设置：

CSS
font-weight: 500;

并不一定能够得到真正独立的 Medium 字形。

font-weight的数字范围与字体支持

现代 CSS 允许 font-weight 使用 1 到 1000 的整数范围。

例如：

CSS
.title {
    font-weight: 650;
}

但是，“CSS 支持 650”和“字体拥有 650 这个独立字重”是两回事。

如果使用的是普通静态字体，而字体文件只提供 400 和 700，浏览器需要根据字体匹配规则选择可用字重。

因此下面这种情况很常见：

CSS
.text {
    font-family: Arial, sans-serif;
    font-weight: 600;
}

实际显示效果可能并不是一个真正独立的 600 字重。

而可变字体则能够在一定范围内提供连续的字重变化。例如字体定义了：

CSS
font-weight: 200 900;

那么浏览器可以根据指定值在这个范围内选择相应的字重。

font-weight与字体文件之间的关系

理解 font-weight，不能只看 CSS，还需要考虑字体文件。

例如网页加载了以下字体：

CSS
@font-face {
    font-family: "DemoFont";
    src: url("regular.woff2") format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: "DemoFont";
    src: url("bold.woff2") format("woff2");
    font-weight: 700;
}

此时：

CSS
.text1 {
    font-family: "DemoFont";
    font-weight: 400;
}

.text2 {
    font-family: "DemoFont";
    font-weight: 700;
}

浏览器可以分别使用两个字体文件。

如果代码写成：

CSS
.text3 {
    font-family: "DemoFont";
    font-weight: 600;
}

但没有定义 600 字体资源，浏览器就需要按照字体匹配规则寻找最合适的可用字重。

这也是为什么有时候修改 font-weight: 500 后，页面看起来和 400 几乎没有区别。

浏览器如何匹配font-weight

font-weight 并不是简单地告诉浏览器“把文字加粗多少”。

浏览器首先需要根据 font-family、字体样式和字重等条件确定使用哪一个字体实例或字体文件。

对于静态字体，如果请求的字重不存在，浏览器会寻找接近的可用字重。

例如字体只有：

400
700

而 CSS 设置：

CSS
font-weight: 600;

浏览器并不会凭空生成一个真正的 600 字体文件，而是根据字体匹配规则选择可用字重。

这也是字体设计与 CSS 属性之间的重要区别：

CSS 中声明的字重范围，不等于字体文件实际拥有的字重数量。

font-weight与font-family必须结合使用

单独研究 font-weight 容易忽略字体本身的影响。

例如：

CSS
.title {
    font-family: Arial, sans-serif;
    font-weight: 700;
}

和：

CSS
.title {
    font-family: "某款中文字体", sans-serif;
    font-weight: 700;
}

即使两者都设置为 700，最终视觉效果也可能存在明显差异。

原因在于不同字体的字形设计、笔画结构和字重分布并不相同。

尤其是中文网页中，不同字体对 400、500、700 等字重的视觉表现差异可能比英文字体更加明显。

因此进行网页视觉还原时，不能只复制设计稿中的 font-weight 数值，还需要确保字体资源一致。

font-weight与font-style有什么区别

font-weight 和 font-style 都属于字体相关属性，但作用完全不同。

CSS
font-weight: 700;
font-style: italic;

其中：

• font-weight 控制字体粗细；

• font-style 主要控制正常、斜体等样式。

例如：

CSS
em {
    font-style: italic;
}

而：

CSS
strong {
    font-weight: 700;
}

两者可以同时使用：

CSS
.title {
    font-weight: 700;
    font-style: italic;
}

这样就能得到粗体斜体效果。

font-weight与文字大小没有直接关系

有些初学者会认为文字越粗，占用空间就一定越大。实际上，font-weight 主要改变字形设计，不负责设置字体尺寸。

字体大小由：

CSS
font-size

控制。

例如：

CSS
.title {
    font-size: 32px;
    font-weight: 700;
}

这里 32px 决定文字大小，而 700 决定字重。

如果希望改变文字尺寸，可以修改：

CSS
font-size: 24px;

如果希望改变粗细，则修改：

CSS
font-weight: 600;

两者职责不同。

font-weight与HTML语义标签的关系

HTML 中的 通常具有强调语义，而浏览器默认样式一般会显示为粗体。

HTML
重要内容

CSS
strong {
    font-weight: 500;
}

CSS
body {
    font-weight: 400;
}

.subtitle {
    font-weight: 500;
}

.section-title {
    font-weight: 600;
}

.main-title {
    font-weight: 700;
}

CSS
@font-face {
    font-family: "MyFont";
    src: url("/fonts/myfont-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "MyFont";
    src: url("/fonts/myfont-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "MyFont";
    src: url("/fonts/myfont-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

CSS
.title {
    font-family: "MyFont", sans-serif;
    font-weight: 700;
}

Regular
Medium
Bold

CSS
@font-face {
    font-family: "VariableFont";
    src: url("/fonts/variable.woff2") format("woff2");
    font-weight: 100 900;
}

CSS
.text {
    font-family: "VariableFont", sans-serif;
    font-weight: 625;
}

CSS
font-weight: 600;

CSS
font-family: "MyFont", sans-serif;

CSS
font-weight: 700;

CSS
font-weight: 400;

CSS
.title {
    font-weight: 700;
}

.container .title {
    font-weight: 400;
}

CSS
.parent {
    font-weight: 600;
}

CSS
.child {
}

HTML
 class="parent">
     class="child">这段文字会继承父元素字重