CSSfont-face字体引入教程详解

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《CSS 如何正确引入字体文件？font-face 使用教程》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

@font-face 必须正确书写 src 属性，使用相对或绝对 URL 并包含 format()，路径以 CSS 文件位置为基准；推荐同时提供 woff2 和 woff 格式，按顺序逗号分隔；务必设置 font-display: swap 防止 FOIT/FOUT，并确保服务器正确配置字体 MIME 类型。

font-face 的基本写法和 src 属性必须写对

浏览器只认 @font-face 规则里的 src 值，路径错一个斜杠、少一个引号、漏掉 format()，字体就加载失败。常见错误是把本地路径（如 C:\fonts\myfont.woff2）直接写进 src，这在网页里完全无效。

• src 必须是相对 URL 或绝对 URL，例如 url('./fonts/myfont.woff2')
• 多个格式要按推荐顺序写，并用逗号分隔，优先放现代格式：url('./myfont.woff2') format('woff2'), url('./myfont.woff') format('woff')
• 路径以 CSS 文件位置为基准，不是 HTML 页面位置；如果 CSS 在 /css/style.css，字体在 /fonts/，就得写 ../fonts/myfont.woff2
• 不要省略 format()，否则 Safari 和旧版 Edge 可能拒绝加载

字体文件格式选 woff2 还是 woff？兼容性怎么平衡

woff2 体积比 woff 小 30% 左右，但 IE 完全不支持；woff 能覆盖 IE9+，是当前最稳妥的“兜底”格式。实际项目中，除非明确放弃 IE，否则应同时提供两种。

• 现代项目可主用 woff2，加 woff 作 fallback：

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

• 如果还要支持 IE8，得额外加 eot 和 svg，但注意 eot 要放在 src 列表最前面（IE 只读第一个）
• 别用 ttf 直接上生产——没有压缩，加载慢，且部分安卓浏览器渲染异常

font-display 控制字体加载行为，避免 FOIT/FOUT 体验崩坏

默认情况下，Chrome 等浏览器会阻塞文本渲染直到字体加载完成（FOIT），导致空白几秒；设成 swap 会先用备用字体显示，等自定义字体就绪再替换（FOUT）。这个属性不加，用户很可能以为页面卡了。

• 推荐值是 font-display: swap，兼顾性能与可用性
• block 会延长阻塞期（最多 3s），适合品牌字体必须显示的场景
• fallback 和 optional 会跳过加载，仅当字体已缓存才用——不适合核心文本
• 该属性需写在每个 @font-face 块内，不能全局设置

字体加载后没生效？检查 font-family 名称和继承链

定义时的 font-family 名称和使用时的名称必须**完全一致**（包括空格、大小写、引号），而且 CSS 优先级、font-weight/font-style 匹配不上也会回退到系统字体。

• 定义时写的是 font-family: 'My Font'，使用时就得写 font-family: 'My Font'，不能写成 MyFont 或 my font
• 如果定义了 font-weight: 700，但元素用了 font-weight: bold，某些浏览器可能不匹配（建议定义时用数字，使用时也尽量用数字）
• 用浏览器开发者工具的 Computed 面板看 font-family 实际解析值，再点开 font 展开项，确认是否显示 “My Font (local)” 或 “(downloaded)”
• 父元素设了 font-family: system-ui 且没被覆盖，子元素即使写了自定义字体也可能被继承压制

实际部署时最容易忽略的是：字体文件 MIME 类型没配对，导致服务器返回 text/plain，浏览器直接拒收。Nginx/Apache 需手动添加 .woff2 对应的 application/font-woff2 类型，否则控制台会报 Failed to decode downloaded font。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~