Chakra-ui设置的fontWeight属性在Firefox浏览器中被忽略问题咨询

问题描述 #

我在chakra-ui/react中为文本设置了指定的fontWeight值，但近日Firefox浏览器直接忽略了文本的fontWeight属性。
预期效果及Chrome中的实际效果： 文字正常加粗显示
Firefox及Firefox开发者版中的实际效果： 文字粗细和普通文本无差异
相关代码如下：

<Text fontWeight="bold" fontSize="2xl">
    This is a sample text.
</Text>

同一已部署的网站在不同浏览器上的显示效果差异极大。
编辑补充： 这看起来不是chakra-ui的问题，甚至我在StackOverflow发帖时，页面里的fontWeight也被Firefox忽略了。

解答 #

原因说明 #

• 字体字重缺失+浏览器渲染逻辑差异：如果你用到的字体没有内置700（bold）对应的字重文件，Firefox默认不会做算法伪加粗，Chrome则会默认对缺失字重的文本做模拟加粗，这是两者表现不一致的核心原因。
• Firefox本地配置被修改：如果连StackOverflow网站本身的字重都被忽略，大概率是你本地Firefox的无障碍配置覆盖了页面样式，你可以进入设置-通用-语言和外观-字体-高级，确认「允许页面选择显示字体而无需使用上面的选择」选项已勾选，未勾选的话所有页面自定义的字重、字体都会被强制替换为系统默认配置。
• 网页字体引入不完整：如果你用的是在线引入的网页字体，要确认引入的资源包包含了你用到的所有字重，只引入400字重的话，Firefox自然无法渲染700的粗体效果。

解决方案 #

• 强制开启字重合成：在全局CSS中添加如下规则，让Firefox和Chrome保持一致的伪加粗逻辑

:root {
  font-synthesis: weight style small-caps;
}

font-synthesis属性用来控制浏览器是否可以自主合成缺失的字体样式，Chrome默认全开启，Firefox部分旧版本默认关闭字重合成。

• 优先引入完整字重：如果对字体样式精度要求高，不要依赖浏览器的模拟效果，直接引入对应字体的所有需要用到的字重文件，从根源避免差异。
• 替换字重写法：可以将字符串格式的bold替换为数值700，减少不同浏览器对关键字的解析差异。

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