为何@font-face需声明在全局作用域而非Shadow DOM内部，有无官方规范依据？

这个经验结论没有单一的规范条文直接提出“@font-face必须放在Shadow DOM外部才能生效”的强制要求，它是两套CSS规范的规则叠加、结合历史浏览器实现共同形成的观测结果，对应的官方依据可追溯到两份核心规范：

核心规则来源 #

• CSS Scoping Module Level 1 作用域隔离条款：Shadow Root是独立的样式作用域边界，默认会将内部的样式匹配、资源注册行为限制在边界范围内，不会向外泄露到全局文档作用域。
• CSS Fonts Module Level 3/4 的@font-face注册规则：@font-face属于字体别名注册规则，注册成功的字体仅可被所在作用域内的元素查询调用；如果将@font-face声明在全局无作用域限制的样式上下文里，字体会被注册到全局字体查询表，可被文档主树、所有Shadow Root内的元素共同使用。

经验结论的形成逻辑 #

大家普遍感知到“@font-face必须放全局、在Shadow DOM里写不生效”，和两个技术阶段的实现直接相关：

1. 早期浏览器实现阶段（2015-2018年）
   主流浏览器刚落地Shadow DOM特性时，完全不支持在Shadow DOM作用域内解析@font-face：只要将@font-face写在Shadow Root内部的style标签中，浏览器会直接忽略这条规则，既不会注册到全局字体表，也不会生成Shadow Root内部的局部字体记录，写法完全没有效果。这一实现和当时的Shadow DOM草案规则完全对齐，也是这个实践经验的最早源头。
2. 现代规范实现阶段
   后续CSS Fonts Module Level 4 明确了@font-face的作用域边界规则：如果在Shadow DOM内部声明@font-face，注册的字体仅能在当前Shadow Root对应的DOM树内使用，既不会泄露到全局作用域，也无法被其他Shadow Root、主文档的元素调用。也就是说，哪怕现在浏览器已经支持解析Shadow DOM内的@font-face，如果需要让字体跨组件、跨作用域复用，写在Shadow DOM内部也达不到全局生效的效果，必须放在全局作用域注册才能覆盖所有场景。

误区澄清 #

• 目前没有任何官方规范强制禁止在Shadow DOM内声明@font-face，现代浏览器已经支持作用域内的字体注册逻辑。
• “必须放全局”的本质是复用需求的匹配：当你需要字体在多个组件、主文档内通用时，全局声明是唯一能跨作用域生效的方案，而非Shadow DOM内的写法存在语法错误。

内容的提问来源于stack exchange，提问作者cypark