加载OTF字体时线上显示字重比本地更粗是什么原因？

可能的原因 #

• 字体加载与匹配规则差异：你本地设备已经安装了该款OTF字体的常规字重版本，开发时浏览器优先调用了本地安装的字体渲染。而线上环境仅加载了你上传的单个OTF文件，如果你的@font-face规则没有显式指定font-weight属性，浏览器会默认将该字体匹配到更粗的字重，甚至自动对字体做加粗模拟。
• 浏览器渲染差异：不同内核的浏览器对OTF字体的字重元数据解析逻辑不同，如果你本地开发用的浏览器和线上测试的浏览器内核不同（比如本地用Chrome、线上用Safari），部分非标准OTF字体的字重标识会被不同浏览器解析出不同的字重效果，视觉上会显得更粗。
• CSS规则冲突：线上环境可能加载了本地开发未引入的全局CSS规则，比如给对应文本节点设置了font-weight: 600这类加粗属性，或者抗锯齿配置不同（比如-webkit-font-smoothing属性取值差异），都会让视觉上字重更粗。
• OTF字体元数据缺失：如果该OTF文件本身没有嵌入规范的字重描述信息，浏览器会默认将其识别为粗体，本地因为安装了完整字体包可以匹配到对应常规字重，线上仅加载单个文件就会出现渲染异常。

解决办法 #

• 完善@font-face声明，显式指定字体对应字重，避免浏览器自动匹配，参考配置：

@font-face {
  font-family: "自定义字体名";
  src: url("你的字体文件路径.otf") format("opentype");
  font-weight: 400; /* 常规字重填400，若该字体本身是粗体则填700，和你实际使用的字重保持一致即可 */
  font-style: normal;
}

• 全局添加CSS规则关闭浏览器自动字体模拟：font-synthesis: none;，禁止浏览器在找不到对应字重字体时自动加粗。
• 用浏览器开发者工具的元素检查功能，对比本地和线上对应文本的最终生效CSS属性，确认是否有其他规则覆盖了字重配置。
• 若后续有条件处理字体文件，可以用本地字体转换工具将OTF转成兼容性更好的WOFF2格式，转换时可以手动修正字重参数，同时减少字体加载体积。

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