不能直接用 blob url 作为 的 href 值来动态加载 css，因浏览器策略限制其不参与样式表生命周期管理；应改用 标签注入 css 文本。
不能直接用 Blob URL 作为 <link rel="stylesheet"> 的 href 值来动态加载 CSS。 浏览器会拒绝解析 Blob URL 指向的 CSS 内容，即使 MIME 类型设为 "text/css"，也会报 net::ERR_BLOCKED_BY_CLIENT 或静默失败——这不是路径或编码问题，而是浏览器策略限制。
为什么 <link> 不接受 Blob URL 样式表
HTML5 规范和主流浏览器（Chrome、Firefox、Safari）明确要求 <link rel="stylesheet"> 的 href 必须指向同源可获取的网络资源或 data URL；Blob URL 虽然同源，但被排除在样式表加载机制之外。这是出于安全与解析模型考虑：CSS 加载需同步阻塞渲染并支持 @import、字体加载等复杂行为，而 Blob URL 仅用于一次性二进制数据访问，不参与样式表级资源生命周期管理。
可行替代方案：用 <style></style> 动态注入 CSS 文本
这是最直接、兼容性最好、且无需服务器配合的方式。本质是把 CSS 字符串插入 <style></style> 标签，由浏览器原生解析：
- 确保 CSS 字符串是纯文本，不含 BOM，编码为 UTF-8
- 创建
<style></style>元素，设置textContent（不用innerHTML，避免 XSS 风险） - 插入到
document.head；如需控制优先级，可插在已有<link>或<style></style>之前 - 若需卸载，直接调用
styleElement.remove()
示例代码：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
function injectCSS(cssText) {
const style = document.createElement('style');
style.textContent = cssText;
document.head.appendChild(style);
return style; // 返回引用，便于后续移除
}
// 使用
const dynamicCSS = `body { background: #f0f0f0; } .highlight { color: red; }`;
const styleEl = injectCSS(dynamicCSS);
// 卸载时
// styleEl.remove();
如果必须用 Blob —— 只能走 data URL 曲线救国
虽然 Blob URL 不被支持，但 data: URL 是允许的，且可绕过同源限制（注意长度限制约 2MB）：
- 将 CSS 字符串转为 base64 编码，拼成
data:text/css;charset=utf-8;base64,... - 赋给
<link href="...">的href属性 - 注意：IE 不支持 data URL 作为样式表；Safari 对长 data URL 解析不稳定
- Base64 编码必须严格（可用
btoa(encodeURIComponent(css).replace(/%([0-9A-F]{2})/g, (m, p1) => String.fromCharCode('0x' + p1)))粗略处理，但更推荐用TextEncoder+Uint8Array+btoa组合保证 UTF-8 正确性）
真正落地时，<style></style> 注入比 data URL 更轻量、更可控，也更容易调试。
Blob URL 在前端资源动态化中用途广泛，但唯独对 CSS 样式表加载是个明确禁区；别在 href 上试了，直接上 <style></style> 是唯一稳解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
