Chrome 65不识别font-display CSS属性求助排查原因

云上老周

2026-5-21

排查Chrome 65不识别font-display属性的思路

我来帮你梳理几个可能的排查方向，之前在社区里也见过不少类似的情况，大概率是一些容易忽略的细节问题：

确认@font-face的语法位置：font-display是@font-face规则的专属属性，不能写在普通元素选择器（比如body或者.text）里。正确的写法应该是：
```
@font-face {
  font-family: 'YourCustomFont';
  src: url('your-font.woff2') format('woff2');
  font-display: swap; /* 必须放在@font-face内部 */
}
```
如果把它放在其他选择器里，DevTools肯定会提示“Unknown Property Name”，因为这个属性根本不属于那些元素。
检查Chrome的特性开关：虽然Chrome 63正式支持font-display，但偶尔会有实验性开关被意外改动的情况。你可以在地址栏输入chrome://flags/#enable-font-display，查看这个选项是否设置为「Enabled」。如果是「Default」或「Disabled」，改成Enabled后重启浏览器再试试。
验证字体文件的加载状态：如果自定义字体本身加载失败（比如路径错误、跨域问题），浏览器根本不会触发font-display的逻辑。打开DevTools的「Network」面板，筛选「Fonts」分类，看看你的字体文件是否返回200状态码。如果加载失败，先解决字体的加载问题，再测试font-display。
排查CSS解析问题：检查你的CSS是否被压缩工具、预处理器或者其他插件误处理了——比如有些旧版压缩工具可能不识别font-display，直接把它删掉了。你可以在DevTools的「Elements」面板里找到对应的@font-face规则，确认font-display属性存在且拼写正确（别写成font-displays或者fontdisplay这类笔误）。
测试极简场景排除干扰：项目里的其他CSS、JS或者第三方库可能会干扰属性生效。你可以新建一个空白HTML文件，只写最基础的@font-face和字体使用代码（比如用一个公开的测试字体），看看font-display是否能正常工作。如果极简场景生效了，再逐步把项目里的代码加回去，定位干扰源。