字体不生效主因是路径错误、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; }- 含空格、数字、连字符、中文的字体名，必须用引号包裹
- 大小写敏感：定义为
'Inter'，就不能在 CSS 中写成'inter' - 多个
@font-face定义同一font-family但不同font-weight或font-style，才能正确匹配粗体/斜体
字体加载看似简单，但路径、format、font-display、font-family 四处细节任意一个出错，都会让字体现在不出来或闪动。尤其注意开发时用本地服务器（如 python -m http.server）跑页面，别直接双击 HTML。
