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）。这个属性不加，用户很可能以为页面卡了。

秘塔AI搜索

秘塔AI搜索，没有广告，直达结果

下载

• 推荐值是 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 且没被覆盖，子元素即使写了自定义字体也可能被继承压制