CSS自定义字体教程：@font-face使用详解

本文深入解析了CSS中@font-face的正确使用方法，强调必须通过它注册本地字体才能被浏览器识别，并详细说明了如何规范声明font-family名称、按woff2→woff→ttf优先级提供多格式字体源（确保跨浏览器兼容）、使用相对于CSS文件的引号路径、搭配合理的系统字体回退栈，以及最关键的一点——务必设置font-display: swap来避免文字空白（FOIT）或闪烁（FOUT），同时给出字体体积优化、子集提取和按需加载等实战建议，帮助开发者真正实现高性能、高可用的自定义字体体验。

如何用 @font-face 声明本地字体文件

必须先通过 @font-face 把字体文件“注册”进 CSS，浏览器才认得它。关键不是放对位置，而是路径写对、格式选对、font-family 名起得清清楚楚。

常见错误：src 里只写一个 url()，结果在 Safari 或 Firefox 里不显示——不同浏览器支持的字体格式不同，得兜底：

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/myfont.woff2') format('woff2'),
       url('fonts/myfont.woff') format('woff'),
       url('fonts/myfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

• woff2 优先放最前（体积小、现代浏览器全支持）
• woff 是兼容老 Chrome/Firefox 的稳妥选择
• truetype（.ttf）仅在 IE9+ 或某些安卓 WebView 中必要，别省略但也不必放第一
• 路径必须相对于 CSS 文件位置，不是 HTML；用相对路径更稳，避免部署后 404

如何在元素上正确使用 font-family

声明完 @font-face 后，font-family 的值不是文件名，也不是路径，而是你给它起的“代号”——也就是 @font-face 里写的那个字符串。

错误写法：font-family: 'myfont.ttf'; 或 font-family: MyCustomFont, sans-serif;（漏掉引号，IE 会失效）

正确写法：

p {
  font-family: 'MyCustomFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

• 自定义字体名必须加单引号或双引号，尤其含空格或连字符时（如 'Inter Var'）
• 务必写回退字体栈：系统字体 + 通用族（sans-serif），防止字体加载失败或超时导致文字不可读
• 不要只写一个自定义字体——没有 fallback 的 font-family: 'MyCustomFont'; 在字体未就绪时会显示空白或默认衬线体

字体加载失败或闪烁（FOIT/FOUT）怎么缓解

浏览器默认行为是：字体没加载完，就等（FOIT），或者先用备用字体渲染再替换（FOUT）。用户看到文字跳变或白屏，问题出在加载策略和 CSS 写法上。

解决核心：用 font-display 控制行为，而不是靠 JS 监听或第三方库硬扛：

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/myfont.woff2') format('woff2');
  font-display: swap; /* 关键！ */
}

• swap：立即用 fallback 渲染，字体加载完立刻换，用户感知最小
• optional：只在字体已缓存时使用，否则直接 fallback（适合非关键字体）
• 别用 block（默认值），它会让文字空白几秒，尤其弱网下体验极差
• font-display 不被 IE 支持，但 IE 本身不支持 @font-face 的高级用法，所以不用为它降级

字体文件太大？怎么查和优化

一个未压缩的 .ttf 动辄 2–5MB，首屏加载卡顿，不是“加了字体”就行，得看实际影响。

检查方法很简单：打开 DevTools → Network → 刷页面 → 筛选 font，看每个字体请求的 size 和 time。

• 优先用 .woff2：比 .woff 小 30%+，所有现代浏览器都支持
• 删子集：如果只用中文，别引入完整思源黑体（10MB+）；用 pyftsubset 或在线工具提取常用字（如 GB2312 范围）
• 按需加载：标题用粗体，正文用常规体？那就分开声明两个 @font-face，并确保 font-weight 值匹配（如 700 对应 bold）
• CDN 加速没用：字体是二进制静态资源，放在同域 + HTTP/2 + Brotli 压缩更实在

字体不是装饰开关，它是文本可读性的基础设施。路径错、格式漏、没 fallback、不设 font-display，任何一个点没踩准，用户看到的就是一段等出来的空白，或突然跳动的文字。

终于介绍完啦！小伙伴们，这篇关于《CSS自定义字体教程：@font-face使用详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！