CSS自定义字体失效，显示为Times New Roman问题排查

先贴出你的配置代码：

@font-face配置：

@font-face {
    font-family: 'Open Sans';
    src: url('/open-sans.eot');
    src: url('/open-sans.eot?#iefix') format('embedded-opentype'),
         url('/OpenSans-Regular.ttf') format('truetype'),
         url('/open-sans.woff') format('woff');

    font-weight: normal;
    font-style: normal;
}

使用代码：

.panel-heading {
    font-family: 'Open Sans';
    font-size: 20px ;
}

针对你遇到的显示Times New Roman的问题，按以下步骤排查：

• 检查文件名大小写：如果你的服务器是Linux/Unix系统，文件名是大小写敏感的。看你的配置里，eot和woff文件用的是小写open-sans，但ttf是OpenSans-Regular，如果实际文件的大小写和配置里的不一致，就会加载失败。确保所有字体文件名和url里的路径完全匹配。

• 验证字体文件是否加载成功：打开浏览器开发者工具（F12），切换到「网络」标签，刷新页面，查看字体文件的请求状态。如果返回404，说明路径还是有问题；如果返回200，再检查文件是否损坏——可以尝试用本地字体预览工具打开字体文件，确认能正常显示。

• 排查字体命名冲突：检查项目中是否有其他CSS文件也定义了'Open Sans'的@font-face规则，或者引入了第三方样式库（比如Bootstrap）自带了Open Sans的配置，导致你的规则被覆盖。可以在开发者工具的「元素」标签里查看.panel-heading的font-family计算值，确认是否真的应用了你的字体。

• 明确字体权重与样式：即使@font-face里设置了normal，元素可能继承了其他权重或样式，导致无法匹配你的字体规则。修改使用代码，明确指定权重和样式：

.panel-heading {
    font-family: 'Open Sans';
    font-size: 20px;
    font-weight: normal;
    font-style: normal;
}

• 检查CSS优先级：如果.panel-heading的样式被其他更高优先级的选择器（比如id选择器、内联样式）覆盖，字体设置就不会生效。可以临时在font-family后加!important测试：

.panel-heading {
    font-family: 'Open Sans' !important;
    font-size: 20px;
}

如果这样能生效，就说明是优先级问题，需要调整选择器的优先级（比如给.panel-heading加父元素选择器）。

• 清除浏览器缓存：浏览器可能缓存了旧的CSS或字体文件，强制刷新页面（Ctrl+F5）或者手动清除缓存后再测试。

内容的提问来源于stack exchange，提问作者egor-n