font-weight依赖font-size的CSS异常问题排查求助

这种情况大概率和字体本身的支持、浏览器渲染机制有关，以下是几个常见原因：

• 字体文件的字重覆盖范围有限
  很多商用或自定义字体并非对所有字重（比如500）在全字号区间都提供对应字形。部分字体仅在16px及以上字号提供500字重的设计，小字号（如14px）的500字重没有单独绘制，浏览器只能用400或600的字重模拟——但小像素下这种模拟效果极不明显，甚至直接被忽略。而Figma用的是矢量渲染，能精准还原字重设置，和浏览器的点阵/光栅渲染逻辑不同。

• 浏览器的字重模拟机制差异
  当字体缺少对应字重的字形时，浏览器会通过算法加粗或减细现有字形来模拟目标字重。但小字号下，像素密度有限，细微的字重变化会被浏览器的抗锯齿或渲染优化抵消，导致视觉上和默认字重无区别；大字号下像素足够多，模拟效果能被肉眼识别，所以看起来生效了。

• CSS规则优先级或继承冲突
  检查14px元素的计算样式（浏览器DevTools的Computed面板），看是否有父元素的font-weight规则、或者更高优先级的选择器（比如带!important的规则）覆盖了你设置的500。有时候大字号元素刚好有其他CSS规则抵消了继承的字重，而小字号元素没有。

• 字体加载或fallback问题
  如果页面加载的字体文件不完整，或者fallback的系统字体在14px下没有500字重的表现，也会出现这种情况。比如主字体加载失败，浏览器自动切换到系统默认字体，而该字体在小字号下仅支持400、700这类常见字重。

排查建议 #

• 换用一款对小字号字重支持完善的字体（比如Inter、Roboto）测试，看是否还存在同样问题，快速排除字体本身的问题。
• 用浏览器DevTools查看元素的computed样式，确认最终生效的font-weight值是否为500，同时检查字体族是否是你预期的字体。
• 显式指定完整的字体族，避免fallback字体干扰，比如：

font-family: "YourTargetFont", sans-serif;
font-size: 14px;
font-weight: 500;

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