Shadow DOM 中 font-family 会从外部泄漏是因为其默认继承宿主或祖先的可继承属性，且样式作用域不阻断继承链；需在 :host 显式声明字体栈来切断继承。

为什么 font-family 会从外部泄漏进 Shadow DOM？

Shadow DOM 默认启用 slot 内容透传和继承链，而 CSS 中的 font-family 是可继承属性。只要宿主元素（host）或其祖先设置了 font-family，且 Shadow Root 没有显式重置，子节点就会继承——这不是 bug，是规范行为。

常见错误现象：document.body 设了 font-family: "PingFang SC"，但你的自定义按钮组件内部文字却没用上你预设的 "SF Pro Text"，反而跟着全局走。

• Shadow DOM 的样式作用域只阻断选择器匹配，不阻断继承链
• :host 本身不自动重置字体，它只是指向 host 元素，样式仍需手动声明
• 如果用了 open 模式且外部 CSS 含通配符（如 * { font-family: ... }），也可能通过 slot 内容“钻进来”

在 Shadow Root 中强制重置字体的三种写法

核心原则：切断继承链。最可靠的方式是在 Shadow Root 的根节点（即 :host 或顶层容器）显式设置 font-family 并搭配 font-size、line-height 等基础排版属性。

推荐优先级从高到低：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

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

• 方式一（最稳）：在 :host 上声明完整字体栈，例如：

  :host {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
  }

• 方式二（防漏）：对 Shadow Root 内所有元素统一重置，加在 :host *:not(:defined) 或直接 * { ... }（注意性能，仅限小型组件）
• 方式三（兼容旧环境）：若需支持 Safari 16.4 之前版本，避免依赖 :host 的伪类嵌套，改用 class 包裹并 scoped 设置

使用 inherit 和 unset 的实际效果差异

别用 font-family: inherit——它会让 Shadow 内部继续向上继承宿主字体；也别盲目用 font-family: unset，它在部分浏览器中等价于 initial，可能回退到系统默认等宽字体（如 Courier）。

• inherit → 继承宿主计算值，等于没隔离
• unset → 在 Firefox 中表现接近 initial，在 Chrome 中有时表现不稳定
• 正确做法：明确写出字体栈，或用 font-family: var(--component-font, system-ui) 配合 CSS 自定义属性控制

动态切换字体时容易忽略的 slot 渲染时机

如果组件允许通过属性（如 data-font="mono"）切换字体，且内部含 <slot>，要注意：slot 内容的样式由宿主决定，不是由 Shadow 内部 CSS 控制。即使你在 :host([data-font="mono"]) > * 里写了 font-family: monospace，slot 里的文本依然按外部样式渲染。

• 解决方案：用 slotchange 事件监听，然后遍历 event.target.assignedNodes()，对文本节点包裹 <span style="font-family: monospace">（慎用，影响语义）
• 更合理方案：要求使用者把 slot 内容也封装为受控子组件，或约定 slot 只接受纯文本，由组件内部用 <span> 包裹后应用字体
• 切记：Shadow DOM 字体隔离 ≠ 内容隔离，slot 是“窗口”，不是“墙”

真正隔离字体的关键不在 Shadow DOM 是否开启，而在是否主动切断继承链并控制 slot 内容的样式归属。很多团队卡在“以为加了 Shadow 就万事大吉”，结果字体还是被全局 CSS 带偏。