本文详解因 HTML 结构嵌套不当（如 内误嵌套 ）导致 @font-face 字体无法渲染的根本原因，并提供可立即验证的修复方案与最佳实践。

本文详解因 html 结构嵌套不当（如 `

` 内误嵌套 `

`）导致 `@font-face` 字体无法渲染的根本原因，并提供可立即验证的修复方案与最佳实践。

在使用自定义字体时，开发者常误以为问题出在 @font-face 声明或字体文件本身，但实际失效往往源于HTML 解析规则的隐式行为——尤其是

标签的自动闭合机制。

根据 HTML 规范，

是一个可省略结束标签的块级元素，且浏览器会在遇到下一个块级元素（如

、

、

等）时自动关闭当前

。这意味着以下结构：

<p>
  </p><div id="name3">Text here</div>
  <mark id="name2">Text here</mark><br><br>
  text text text <!-- 这里本应应用 ktegaki 字体 -->

会被浏览器解析为：

<p></p> <!-- 自动在此处闭合 -->
<div id="name3">Text here</div>
<mark id="name2">Text here</mark><br><br>
text text text <!-- 此段文本已脱离 <p>，继承父容器样式（可能无 font-family 设置） -->

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

内容，而

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

实际已被提前截断，后续纯文本处于

外部，自然无法继承该字体。

✅ 正确修复方式：

1. 避免在

   中嵌套块级元素

   ；若需结构化内容，请改用语义化容器（如
   ）并显式设置字体：

   <div id="name1">
     <div id="name3">Text here</div>
     <mark id="name2">Text here</mark><div style="font-family: 'ktegaki', sans-serif;">text text text text...</div>
   </div>

2. 或改用内联元素替代

   （如 #name3 改为 ），保持

   完整性：

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

   并确保 #name3 和 #name1 的 CSS 显式继承或覆盖字体：

   #name1 {
     font-family: 'ktegaki', sans-serif; /* 关键：直接设在容器上 */
     font-size: 10px;
     color: #000;
   }
   #name3 { font-family: inherit; } /* 确保子元素继承 */

   ⚠️ 其他关键注意事项：

   • @font-face 中的 font-family 名称区分大小写，CSS 中调用时必须完全一致（如 'ktegaki' ≠ 'Ktegaki'）；建议统一使用小写+单引号包裹。
   • 确保字体文件支持目标浏览器的格式（.ttf 兼容性良好，但生产环境推荐添加 woff2 回退）。
   • 使用浏览器开发者工具 → Elements 面板检查实际渲染的 DOM 结构，而非源码；右键“检查元素”可直观发现

     是否被意外截断。

   • 验证字体是否加载成功：Network 面板过滤 font，确认 KTEGAKI.ttf 返回状态码 200 且无 CORS 报错（Dropbox 直链默认禁用跨域，需替换为支持 CORS 的托管服务，如 GitHub Pages 或 CDN）。

   ? 总结：字体不显示 rarely 是 @font-face 的错，而是 HTML 结构与浏览器解析规则共同作用的结果。掌握

   的隐式闭合逻辑，是前端排版调试中一项基础却极易被忽视的核心能力。