如何通过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 和部分国产浏览器就挂掉。