CSS引入字体技巧：@font-face使用详解

CSS中正确引入自定义字体看似简单，实则暗藏四大关键陷阱：路径必须严格相对于CSS文件或使用安全的绝对路径（禁用file://）、format声明需与字体真实格式完全一致（如woff2不能误写为woff）、务必设置font-display: swap等策略避免文本渲染阻塞导致白屏或闪烁，以及font-family在@font-face定义与后续调用时必须大小写、引号、空格全等匹配——任一环节出错，字体就会静默失效，回退到系统默认字体，而浏览器往往不报错，让人排查无从下手。

字体文件路径写错导致 @font-face 不生效

最常见的问题是 src 中的 URL 路径没对上实际文件位置。浏览器不会报错，但字体就是不替换——它默默回退到系统默认字体。关键要确认：路径是相对于 CSS 文件所在位置，不是 HTML 页面。

• 如果 CSS 在 /static/css/style.css，字体在 /static/fonts/Inter-Regular.woff2，那么 url('../fonts/Inter-Regular.woff2') 才对
• 用绝对路径更稳：url('/static/fonts/Inter-Regular.woff2')（注意开头的 /）
• 别用 file:// 协议本地双击打开 HTML——现代浏览器会因安全策略拒绝加载本地字体

@font-face 的 format 声明不能乱写

format() 只是提示浏览器“这个文件是什么类型”，不是转换指令。写错不会报错，但可能让某些浏览器跳过加载。必须和真实文件格式严格一致：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

• woff2 写成 woff 或漏掉，Safari 15+ 和 Chrome 可能忽略该条目
• truetype 是 TTF 的标准写法，不是 tff 或 ttf
• 建议按兼容性从高到低排列：woff2 → woff → truetype，浏览器取第一个它支持的

font-display 控制加载行为，不设就卡顿

默认情况下，浏览器会阻塞文本渲染，等字体加载完才显示文字（FOIT）。用户看到空白或闪烁，体验差。加 font-display 能明确行为：

• font-display: swap：先用备用字体显示，加载完立刻换（最常用）
• font-display: fallback：短暂等待（100ms），再用备用字体，避免小字号下反复重排
• font-display: optional：只在缓存命中时用，否则全程用备用字体（适合非关键字体）
• 不写 font-display 时，Chrome 等默认是 auto（表现接近 block），容易白屏

字体名大小写和引号影响 CSS 匹配

font-family 在 @font-face 中定义的值，和后续 CSS 中调用时必须完全一致，包括大小写、空格、连字符和是否加引号：

@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
}
p {
  font-family: 'Inter', sans-serif; /* ✅ 必须带单/双引号 */
}
/* ❌ 下面这行不会生效 */
p { font-family: Inter, sans-serif; }

• 含空格、数字、连字符、中文的字体名，必须用引号包裹
• 大小写敏感：定义为 'Inter'，就不能在 CSS 中写成 'inter'
• 多个 @font-face 定义同一 font-family 但不同 font-weight 或 font-style，才能正确匹配粗体/斜体

字体加载看似简单，但路径、format、font-display、font-family 四处细节任意一个出错，都会让字体现在不出来或闪动。尤其注意开发时用本地服务器（如 python -m http.server）跑页面，别直接双击 HTML。

到这里，我们也就讲完了《CSS引入字体技巧：@font-face使用详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！