如何通过HTML CSS @font-face指令调用托管在服务器上的自定义字体？

本文共计913个文字，预计阅读时间需要4分钟。

很多人将字体路径写成相对于HTML文件的，结果在浏览器Network面板中看到404，控制台报错Failed to load resource。实际规则是：

常见错误包括：

• 用 file:// 协议直接双击打开 HTML —— 浏览器因 CORS 拒绝加载本地字体，必须起本地服务（如 python3 -m http.server）
• 部署后路径结构变化，但 CSS 里还写着开发时的相对路径
• 服务器没配 MIME 类型，返回 text/plain 而非 font/woff2，Chrome 会静默失败

必须提供 woff2 + woff + ttf 多格式 fallback

只放一个 .ttf 文件，Safari iOS 15.4 之前、旧版 Android WebView 就会不认；只放 .woff2，IE 11 和部分国产浏览器就挂掉。现代写法要按兼容性优先级排列：

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

注意点：

立即学习“前端免费学习笔记（深入）”；

• format('truetype') 对应 .ttf，不是 'ttf' —— 写错会导致整个 src 条目被忽略
• 不同字重（如 400/700）和样式（normal/italic）必须各自声明独立的 @font-face 块，不能混在一个里
• 如果字体文件本身不含 italic 变体，却声明了 font-style: italic，浏览器会做算法倾斜，效果难看

font-display: swap 是防止 FOIT/FOUT 回闪的关键

没加 font-display 时，文字会先空白（FOIT）或先用系统字体再跳变（FOUT），用户感知极差。加 font-display: swap 后，浏览器会立即用后备字体渲染，等自定义字体加载完成再无感替换。

但它不是万能的：

• 某些低版本 Safari（font-display，需搭配 @supports 或 JS 检测降级
• 如果字体文件体积过大（>200KB），swap 期间可能造成明显重排，建议用 font-weight 和 font-style 精确匹配，减少回退次数
• CDN 上的字体若没配 Access-Control-Allow-Origin: *，跨域请求会失败，Network 面板显示 CORS error

font-family 名称大小写和引号必须严格匹配

声明时写了 font-family: 'HarmonyOS Sans'，后续 CSS 里就必须写 font-family: 'HarmonyOS Sans', sans-serif;。漏引号、大小写不一致、多空格，都会导致匹配失败，浏览器直接跳过该字体。

容易被忽略的细节：

• 中文字体名含空格或中文时，font-family 值必须用英文单引号或双引号包裹，否则解析出错
• 同一字体多个变体（如 Regular / Bold / Medium）必须用不同 font-family 名或统一族名+不同 font-weight，否则浏览器无法区分
• 别在 @font-face 里写 font-weight: bold 却在 HTML 元素上只设 font-weight: 600 —— 数值不匹配就会回退

字体加载是否生效，最终得看 Network 面板里 Font 分类下有没有 200 响应，以及 computed 样式里 font-family 是否显示你定义的名字。路径、格式、名称、CORS，四者缺一不可。