如何利用HTML的CSS @font-face引入服务器托管的自定义字体文件-html教程-PHP中文网

font-face的src路径必须相对于CSS文件位置，而非HTML文件；常见错误包括路径错误、缺少多格式fallback（woff2/woff/ttf）、未设font-display:swap、CORS或MIME配置不当，四者缺一不可。

如何利用html的css @font-face引入服务器托管的自定义字体文件

font-face 的 src 路径必须相对于 CSS 文件位置

很多人把字体路径写成相对于 HTML 文件，结果浏览器在 Network 面板里看到 404，控制台报 Failed to load resource。实际规则是：CSS 里的 url('fonts/Inter.woff2') 中的 fonts/ 是从该 CSS 文件所在目录开始算的。比如 CSS 在 /css/style.css，字体在 /fonts/Inter.woff2，那就要写 url('../fonts/Inter.woff2')。

常见错误包括：

用 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 后，浏览器会立即用后备字体渲染，等自定义字体加载完成再无感替换。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

但它不是万能的：

某些低版本 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，四者缺一不可。