动态添加CSS规则的正确方法

本文深入解析了动态插入 CSS 规则（如 `@font-face`）时常见的认知误区：虽然通过 `CSSStyleSheet.insertRule()` 成功添加规则并能被浏览器样式引擎识别和应用，但 `

元素中正确显示 " />

动态创建

在 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。