onerror无法捕获css加载失败，因元素不支持该事件；应通过getcomputedstyle检测特征类样式是否生效，并动态插入备用css确保优先级更高。
onerror 能不能捕获 CSS 加载失败
不能直接捕获。onerror 在 <link> 标签上是无效的——浏览器根本不会触发它，哪怕 CSS 404 或跨域被拒。这不是 bug，是规范行为。很多开发者试了没反应，就是卡在这儿。
真正能用 onerror 的只有 <script></script>、<img>、<iframe></iframe> 这类明确支持该事件的元素。
怎么检测 CSS 是否加载成功
得换思路：不等错误，而是主动查结果。核心是判断某个样式是否在页面中生效，比如检查一个「特征类」是否影响了某个 DOM 元素的计算样式。
- 选一个在备用 CSS 里定义、主 CSS 里也定义（或未定义）的 class，例如
.css-loaded-check - 在 HTML 中放一个带该 class 的隐藏
<div id="css-check"></div> - 用
getComputedStyle()检查它的某个属性值（如color或opacity），对比预期值 - 加个短超时（比如 3s），避免无限等待
示例逻辑：
const checkEl = document.getElementById('css-check');
const timeout = setTimeout(() => {
if (getComputedStyle(checkEl).color !== 'rgb(255, 0, 0)') {
loadFallbackCSS();
}
}, 3000);
如何安全加载备用 CSS 文件
用 document.createElement('link') 动态插入最稳妥，但要注意两点：一是必须设 rel="stylesheet"，二是插入后无法靠 onload 100% 保证样式已就绪（某些浏览器会延迟应用）。
- 插入前先清掉可能残留的旧
<link>，避免重复加载 - 用
link.onload+link.onerror做基本状态反馈，但别只信onload—— 它可能在样式未生效时就触发 - 加载后建议再跑一次样式检测，确认目标规则确实可用
- 路径尽量用绝对 URL，避免相对路径在动态插入时解析出错
示例片段：
function loadFallbackCSS() {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/fallback.css';
link.onload = () => console.log('fallback loaded');
link.onerror = () => console.error('fallback failed too');
document.head.appendChild(link);
}
为什么不用
因为标准不支持。W3C 规范里，<link> 元素没有 onerror 事件处理机制。Chrome、Firefox、Safari 都忽略它，连控制台警告都不会有。你写上去，它就静静躺在那儿，什么也不干。
有人用 MutationObserver 监听 变化来“曲线救国”，但成本高、时机难控，还容易和 SSR 或框架的 hydrate 冲突。真要健壮，还是老实用样式检测+动态加载组合更靠谱。
实际项目里最容易被忽略的是：备用 CSS 的选择器优先级必须高于主 CSS 中同名规则，否则即使加载成功，样式也不会生效。这点比加载逻辑本身还容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
