HTML中如何使用@font-face引入自定义字体-html教程-PHP中文网

@font-face 使用需声明正确、路径准确、格式匹配、调用一致，且 font-family 名称须严格大小写与引号一致；src 路径以 CSS 文件为基准，推荐多格式 fallback；font-weight/font-style 需单独声明；加 font-display: swap 可缓解 FOIT/FOUT；务必通过 Network 面板验证字体是否成功加载。

html中如何使用@font-face引入自定义字体

@font-face 不是“加个链接就能用”，而是必须声明+路径正确+格式匹配+调用一致，缺一不可；否则浏览器直接跳过，文字照常回退到系统字体。

font-family 名字写错或没加引号

声明时 font-family: 'HarmonyOS Sans'，调用时却写 font-family: HarmonyOS Sans（没引号）或 font-family: 'harmonyos sans'（大小写不一致），浏览器就认不出。中文名、带空格、连字符的字体名，必须用英文单/双引号包裹；且大小写要和 @font-face 块里完全一致。

✅ 正确声明：@font-face { font-family: 'Inter Variable'; src: url('./fonts/inter-var.woff2') format('woff2'); }
✅ 正确调用：body { font-family: 'Inter Variable', sans-serif; }
❌ 错误调用：font-family: Inter Variable;（无引号）、font-family: 'inter variable';（小写）

src 路径错误或格式 fallback 顺序不合理

路径是以 CSS 文件为基准的相对路径，不是 HTML 文件或服务器根目录。比如 CSS 在 /css/style.css，字体在 /fonts/inter.woff2，那就要写 url('../fonts/inter.woff2')。另外，只放一个 .ttf 文件，Safari 和旧 Android 会静默失败——它不支持直接加载未压缩的 TTF。

✅ 推荐写法：src: url('./fonts/inter.woff2') format('woff2'), url('./fonts/inter.woff') format('woff'), url('./fonts/inter.ttf') format('truetype');
❌ 危险写法：src: url('/fonts/inter.ttf');（绝对路径易跨域）、src: url('inter.ttf');（路径相对于当前页面，非 CSS）
⚠️ 注意：format('truetype') 对应 .ttf，format('opentype') 对应 .otf，写错 format 类型也会让部分浏览器拒绝加载

font-weight 或 font-style 不匹配导致回退

你声明了一个 font-weight: 400 的常规体，但 HTML 里某个默认是 font-weight: bold（即 700），而你没提供对应粗体的 @font-face 块——浏览器不会“加粗”那个常规体，而是直接切到 sans-serif 回退字体。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

需要粗体？单独写一个块：@font-face { font-family: 'MyFont'; font-weight: 700; src: url('./fonts/myfont-bold.woff2') format('woff2'); }
需要斜体？也得单独声明：@font-face { font-family: 'MyFont'; font-style: italic; src: url('./fonts/myfont-italic.woff2') format('woff2'); }
别指望一个 @font-face 块覆盖所有 weight/style 组合；浏览器严格按声明匹配

字体加载完成前文字不可见（FOIT）或闪动（FOUT）

默认情况下，浏览器会等字体下载完才渲染文字（FOIT），造成空白卡顿；或者先用系统字体渲染，等自定义字体加载完再替换（FOUT），造成闪动。这不是 bug，是默认行为。

加 font-display: swap; 是最简单有效的缓解方式，它让浏览器立即用回退字体渲染，等自定义字体就绪后无缝替换
别漏掉它：@font-face { font-family: 'MyFont'; src: url('./fonts/myfont.woff2'); font-display: swap; }
如果字体文件本身大（>100KB）或网络差，swap 也不能消除延迟，这时要考虑拆子集（unicode-range）或换更轻量字体

最容易被忽略的是：字体文件是否真的被请求了。打开 DevTools → Network → Filter “Font”，看有没有 404 或 CORS error；有就立刻修路径或配 header。别猜，直接看 Network 面板——那是唯一能确认字体是否真正抵达浏览器的地方。