如何解决 HTML 中 @font-face 定义的字体无法渲染的问题-html教程-PHP中文网

本文详解因 HTML 结构误用（如内嵌块级元素导致自动闭合）引发的字体加载失败问题，并提供可落地的修复方案与最佳实践。

本文详解因 html 结构误用（如 `

` 内嵌块级元素导致自动闭合）引发的字体加载失败问题，并提供可落地的修复方案与最佳实践。

在实际开发中，即使 @font-face 声明语法正确、字体文件 URL 可访问且无 CORS 限制，字体仍可能“消失”——表面看是字体没加载，实则常为HTML 解析行为干扰了样式应用目标。您遇到的 ktegaki 字体不显示，根本原因并非字体本身或 CSS 书写错误，而是 HTML 结构触发了浏览器的隐式标签闭合机制。

? 根本原因：

标签被自动提前闭合

根据 HTML 规范，

是不可嵌套块级元素的段落容器。当解析器在

内遇到首个块级元素（如

、

等），会立即自动关闭当前
，后续内容将脱离该

的作用域。

您的结构如下：

<div id="name1">
  <p>
    </p>
<div id="name3">Text here</div> <!-- ⚠️ 块级元素！触发 <p> 自动闭合 -->
    <mark id="name2">Text here</mark><br><br> 
    text text text ... <!-- 这些文字已不在 <p> 内，因此 #name1 的 font-family 不生效 -->
  
</div>

此时，#name1 的 font-family: Ktegaki 仅作用于

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

开始到

之前那段（通常为空），而所有后续文本（包括您期望显示 ktegaki 的“text text text…”）实际位于

之外、

内部的匿名文本节点上——它继承的是父容器或浏览器默认字体，而非 #name1 的 font-family。

✅ 验证方式：打开浏览器开发者工具 → 检查“text text text…”对应 DOM 节点 → 查看 computed styles 中 font-family，会发现其值并非 Ktegaki，而是 serif 或其他后备字体。

✅ 正确解决方案

方案一：替换块级元素为行内元素（推荐）

将

改为（是行内元素，不会触发

闭合）：

<div id="name1">
  <p>
    <span id="name3">Text here</span>
    <mark id="name2">Text here</mark><br><br>
    text text text text text text text text text text text text text text text
  </p>
</div>

同时确保 CSS 中 #name3 的样式兼容行内语义（如需块级表现，可用 display: inline-block 或 display: block 显式设置）。

方案二：移除包裹

，直接使用语义化容器

<div id="name1">
  <div id="name3">Text here</div>
  <mark id="name2">Text here</mark><div>text text text text text text text text text text text text text text text</div>
</div>

然后将 font-family: Ktegaki 应用于 #name1 或其子 div，逻辑更清晰、无歧义。

⚠️ 补充注意事项

字体名称大小写敏感：CSS 中调用时需严格匹配 @font-face 中定义的 font-family 值（如 'ktegaki' ≠ 'Ktegaki'）。建议统一使用小写声明与调用。
字体加载状态检查：可通过 document.fonts.check('12px ktegaki') 或监听 fontface.load 事件确认字体是否真正加载完成。
跨域字体限制：Dropbox 直链默认禁用 CORS，即使能手动下载，浏览器仍会因缺少 Access-Control-Allow-Origin 头拒绝加载。强烈建议将字体托管至支持 CORS 的 CDN 或本地服务器，或使用 crossorigin="anonymous" 属性（需服务端配合）：
```
@font-face {
  font-family: 'ktegaki';
  src: url('/fonts/KTEGAKI.ttf') format('truetype');
  /* 添加 crossorigin 属性（HTML 中）或确保服务端响应头包含 CORS */
}
```
字体格式兼容性：.ttf 在现代浏览器中支持良好，但为兼顾旧版 Safari，可补充 .woff2 / .woff 格式并按优先级排序：
```
src: url('ktegaki.woff2') format('woff2'),
     url('ktegaki.woff') format('woff'),
     url('ktegaki.ttf') format('truetype');
```