元素中正确显示
" />
动态创建 元素后调用 insertRule() 添加 @font-face 等规则，虽能成功写入 CSSStyleSheet 对象，但元素内容仍为空；本文详解其原理、正确实践及关键注意事项。
动态创建 `
在 Web 开发中，通过 JavaScript 动态注入样式（尤其是 @font-face、媒体查询或主题变量）是一种常见需求。然而，开发者常遇到如下现象：
const styleElement = document.createElement('style');
document.head.appendChild(styleElement);
const sheet = styleElement.sheet;
const fontIdentifier = 'CustomIconFont';
const font = { url: '/fonts/icon.woff2' };
const rule = `@font-face {
font-family: '${fontIdentifier}';
src: url('${font.url}');
}`;
sheet.insertRule(rule); // ✅ 成功插入到 sheet.rules 中
console.log(sheet.cssRules.length); // → 1
console.log(styleElement.innerHTML); // → ""（空字符串）
console.log(styleElement.textContent); // → ""（仍为空）
这是预期行为，而非 Bug。
✅ 正确做法是：无需关心 styleElement 是否“可见”内容，只要 sheet.insertRule() 成功，样式即已生效。
验证方式应为：
- 检查 sheet.cssRules 长度或遍历规则；
- 在 DevTools 的 Elements 面板中展开
- 实际应用字体（如设置 font-family: CustomIconFont 的元素是否正常渲染）。
⚠️ 注意事项：
- insertRule() 的语法必须严格符合 CSS 规范，否则抛出 SyntaxError（例如 @font-face 中缺少 font-family 或 src）；
- @import 和 @charset 规则有插入位置限制（须在所有其他规则前），而 @font-face 可任意插入；
- 若需调试可见源码，可手动同步（不推荐用于生产）：
styleElement.textContent = rule; // 仅覆盖，不追加；且会丢失已有规则
更安全的同步方式是维护规则列表并重写 textContent，但违背了 CSSStyleSheet 的设计初衷。
? 总结：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
