求助：CSS的font-weight属性设置后字体粗细无变化

核心原因 #

你设置的font-weight没有效果，本质是当前使用的字体没有提供对应字重的变体文件——浏览器只能 fallback 到该字体支持的最接近的字重，所以外观没有变化。比如系统默认的Arial字体通常只支持400（normal）和700（bold）两种字重，设置100（thin）、800、900这些值时，浏览器会自动用400或700替代。

解决方法 #

• 选择支持多字重的字体
  换用一款包含全字重变体的字体，比如Roboto、Inter等，这类字体通常提供100到900的完整字重选项，能准确渲染不同粗细的文字。

• 正确匹配font-weight属性值
  关键字和数值的对应关系要准确：

  • thin → 100，light → 300，normal → 400，bold → 700，black → 900
    优先使用数值更稳定，但前提是字体有对应变体。

• 自定义字体需正确声明字重
  如果引入了自定义字体，必须在@font-face中为每个字重单独声明对应的字体文件，示例：

  @font-face {
    font-family: 'MyCustomFont';
    src: url('myfont-thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
  }
  @font-face {
    font-family: 'MyCustomFont';
    src: url('myfont-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
  }
  
  .p1 {
    font-family: 'MyCustomFont';
    font-weight: 100; /* 此时会加载对应的thin字体文件 */
  }
  

• 排查样式优先级冲突
  用浏览器开发者工具查看元素的计算样式，确认你的font-weight设置是否被更高优先级的CSS规则覆盖。如果是，可以提高选择器优先级（比如用p.p1代替.p1）或者添加!important（尽量少用，优先优化选择器）。

修正后的示例 #

.p-thin {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}
.p-bold {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}
.p-black {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}

<p>默认字体（normal/400）</p>
<p class="p-thin">It was the best of times, it was the worst of times</p>
<p class="p-bold">It was the best of times, it was the worst of times</p>
<p class="p-black">It was the best of times, it was the worst of times</p>

内容的提问来源于stack exchange，提问作者sarah moula