iframe中字体不生效主因是跨域限制：跨域iframe无法继承父页@font-face或link字体，子页须独立完整声明；同源时需确保父页字体资源已加载。
iframe里字体不生效，先确认是否跨域
iframe加载的页面如果和主站不同源（协议、域名、端口任一不同），就无法继承父页面的 @font-face 声明或 <link> 引入的字体——浏览器会直接忽略，连请求都不会发。这不是写法问题，是同源策略硬限制。
- 同源 iframe：字体可复用父页已加载的资源，但必须确保父页的 CSS 或
<link>已提前加载且未被阻塞 - 跨域 iframe：子页面必须自己独立声明字体，不能依赖父页；否则文字会静默 fallback 到系统字体（如宋体、PingFang SC）
- 检查方法：打开 iframe 页面的 DevTools → Network → 过滤
font，看是否有 404 或 pending；若为空，基本就是跨域导致资源不可见
跨域 iframe 必须在子页面内完整声明 @font-face
不能只靠父页定义 font-family 名称，子页面的 CSS 必须包含完整的 @font-face 规则，且路径、格式、字重全部匹配。
- 路径必须相对于子页面自己的 CSS 文件位置，不是父页面的路径。比如子页 CSS 在
/app/css/main.css，字体在/app/fonts/NotoSansSC.woff2，那就得写url('fonts/NotoSansSC.woff2') - 中文字体体积大，务必提供
woff2+woff双格式，且format('woff2')放src最前面 - 每个字重（如
400、700）单独写一个@font-face块，font-weight和实际文件元数据必须一致；Noto Sans SC 的粗体文件不能用font-weight: 700指向 regular 文件 - 加
font-display: swap，否则跨域加载慢时 iframe 内文字会长时间空白（FOIT）
Google Fonts 在 iframe 子页里要带 subset=chinese-simplified
直接复制官网给的英文链接进 iframe 的 ，中文很可能显示为方块——因为默认只加载 latin 字符集。
- 必须显式加上
&subset=chinese-simplified，例如：https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap&subset=chinese-simplified -
<link>标签要放在子页面最前面，早于任何使用该字体的 CSS -
font-family值必须带英文双引号：font-family: "Noto Sans SC", sans-serif；漏引号或大小写错（如写成noto sans sc）都会失效 - 别用
@import加载 Google Fonts——它在 iframe 里更容易被阻塞，且不支持display=swap参数
字体 fallback 链在 iframe 里更关键
iframe 子页面加载环境更不可控：网络差、缓存空、CORS 配置不全都可能导致字体请求失败。一旦失败，没有 fallback 就是满屏方块或默认等宽字体。
- 中文字体 fallback 推荐按顺序写：
"Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif - 避免只写一个自定义字体名，也不要用
serif或sans-serif单独兜底——它们在不同系统下渲染差异极大，中文可能直接崩形 - 如果子页面是纯中文内容，建议在
@font-face中加unicode-range限定范围，比如U+4E00-9FFF（常用汉字），减少非必要字形下载量
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
