css字体文件如何正确引入_使用@font-face定义并加载字体_技术教程

字体不生效主因是路径错误、format不匹配、缺font-display及font-family引用不一致；路径须相对CSS文件或用绝对路径；format需与真实格式严格对应；font-display推荐swap；font-family调用时须加引号且大小写全等。

字体文件路径写错导致 @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; }