如何解决 HTML 中 @font-face 定义的字体部分不生效的问题

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

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

` 内误嵌套 `

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

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

根据 HTML 规范，<p> 是一个可省略结束标签的块级元素，且浏览器会在遇到下一个块级元素（如 <p>、<h1>、<section> 等）时自动关闭当前 <p>。这意味着以下结构：

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

会被浏览器解析为：

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

因此，#name1 的 font-family: Ktegaki; 仅作用于 <p> 内容，而 <p> 实际已被提前截断，后续纯文本处于 <p> 外部，自然无法继承该字体。

立即学习“前端免费学习笔记（深入）”；

✅ 正确修复方式：

1. 避免在 <p> 中嵌套块级元素；若需结构化内容，请改用语义化容器（如 <p>）并显式设置字体：

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

2. 或改用内联元素替代 <p>（如 #name3 改为 <span>），保持 <p> 完整性：

   <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 结构，而非源码；右键“检查元素”可直观发现 <p> 是否被意外截断。
• 验证字体是否加载成功：Network 面板过滤 font，确认 KTEGAKI.ttf 返回状态码 200 且无 CORS 报错（Dropbox 直链默认禁用跨域，需替换为支持 CORS 的托管服务，如 GitHub Pages 或 CDN）。

? 总结：字体不显示 rarely 是 @font-face 的错，而是 HTML 结构与浏览器解析规则共同作用的结果。掌握 <p> 的隐式闭合逻辑，是前端排版调试中一项基础却极易被忽视的核心能力。