CSS加载失败时浏览器不会自动回退，必须由开发者主动提供备用样式；@import无法实现fallback；最可靠方案是onerror+document.write插入内联样式；现代方案可用CSSStyleSheet动态注入。
CSS加载失败时浏览器根本不会执行回退逻辑
浏览器遇到 link 标签加载 CSS 失败（如 404、超时、CORS 拒绝），**不会自动尝试下一个样式表，也不会回退到内联样式或默认样式**。它只会继续渲染 HTML，此时所有依赖该 CSS 的样式规则失效，页面可能完全无样式或部分错乱。
所谓“备用样式”，必须由开发者主动提供、提前声明、且在主 CSS 加载前就已生效——不是靠浏览器兜底，而是靠加载顺序和 DOM 控制。
@import 在 <style></style> 中无法实现 CSS 备用加载
@import 是 CSS 规则，不是 HTML 加载机制。把它写在 <style></style> 里，等同于把一个外部请求塞进 CSS 解析流程，不仅不提升容错，反而会阻塞渲染、增加级联失败风险。
常见错误现象：@import url("main.css") 失败后，整个 <style></style> 块里其他规则（包括降级样式）也可能被忽略，尤其在旧版 Safari 和某些移动端 WebView 中。
立即学习“前端免费学习笔记（深入）”；
- 不要用
@import实现“备选”：它没有加载失败回调，也不支持 fallback 语法 - 不要把降级样式写在
@import后面：CSS 解析器可能跳过整块 - 真正有效的降级样式，必须出现在
<style></style>或style属性中，且位于任何@import之前
用 onerror + document.write 替换失败的 <link>
这是目前最可靠、兼容性最好（IE9+）、无需构建工具介入的运行时 fallback 方案。核心是监听 <link> 加载失败，然后动态插入内联样式。
注意：必须把脚本放在 <link> 标签**后面**，否则 this 指向可能为空；也不能用 defer，否则时机太晚。
<link rel="stylesheet" href="/css/main.css" onerror="this.remove(); document.write('<style>body{margin:0;padding:1rem;font-family:sans-serif;line-height:1.5}h1{font-size:1.5rem}a{color:#0066cc}</style>')">
-
onerror只对网络错误（404/timeout/CORS）触发，不响应 CSS 语法错误 -
document.write在 DOM 构建阶段安全，但页面加载完成后调用会清空整个文档——所以只适用于初始加载 - 内联样式优先级高于外部 CSS，能覆盖掉未加载成功的规则，但无法模拟复杂选择器层级，建议只定义基础排版和链接颜色
现代方案：rel="preload" + fetch() + CSSStyleSheet 动态注入
如果你需要更精细控制（比如加载多个备用源、带超时、记录埋点），可以用 JS 主动加载 CSS 并注入 CSSStyleSheet 对象。但要注意：IE 完全不支持 CSSStyleSheet.insertRule，且 fetch() 返回的 CSS 文本需手动解析规则。
关键限制：动态注入的样式表不参与媒体查询匹配（除非显式设置 media），也不触发 load 事件，调试难度高。
- 必须用
new CSSStyleSheet()创建，再用replaceSync()或replace()注入内容 - 直接
document.styleSheets[0].insertRule(...)仅支持单条规则，无法批量写入完整 CSS 字符串 - 如果主 CSS 加载成功，备用样式必须显式清除，否则会叠加造成意外交互
最易被忽略的一点：字体、图标、伪元素内容（::before{content:"→"}）这类依赖外部资源的样式，即使主 CSS 加载成功，其子资源失败也不会触发 link.onerror。这类问题得靠字体加载 API（FontFace.load()）或 SVG 内联化单独处理。
