React项目中带纹理自定义字体在h1等标题标签下纹理不显示问题

问题解决方案 #

1. 优先排查字重匹配问题 #

绝大多数带纹理的自定义字体仅支持特定字重，浏览器默认会给h1/h2等标题标签设置font-weight: 700（粗体），如果你的@font-face仅引入了常规字重（400）的字体文件，浏览器会自动生成伪粗体效果，直接覆盖字体自带的纹理。

• 解决方案：给所有标题标签显式设置和正常显示元素一致的字重，示例代码如下：

h1, h2, h3, h4, h5, h6 {
  font-weight: 400; /* 可查看正常显示的nav a元素的computed样式，匹配对应字重值 */
}

如果需要粗体效果，需要额外引入对应字重的带纹理字体文件，在@font-face中正确声明对应的font-weight属性。

2. 检查抗锯齿属性影响 #

部分系统和浏览器会给大字号标题默认开启高阶抗锯齿效果，会抹除带纹理字体的细节：

• 解决方案：给标题标签关闭强制抗锯齿，示例代码如下：

h1, h2, h3, h4, h5, h6 {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

3. 确认样式优先级与额外属性干扰 #

打开浏览器开发者工具，选中异常的标题标签，查看「计算样式」面板：

• 确认font-family确实是你声明的自定义字体，没有被全局重置样式、UI组件库样式等高优先级规则覆盖
• 排查是否有额外的text-shadow、text-stroke、text-transform等文本修饰属性影响纹理渲染
• 临时把标题的font-size修改为和正常显示的nav a一致，若纹理恢复则说明当前字号超出了该字体的最优渲染范围，可调整字号或添加font-size-adjust属性适配

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