使用insertRule()添加CSSStyleSheet后style元素为空，如何显示@font-face规则？

你直接修改styleElement的文本内容即可，无需通过sheet.insertRule，这样规则就会直接显示在<style>标签内部：

const styleElement = document.createElement('style');
document.head.appendChild(styleElement);

const rule = `@font-face {
  font-family: '${fontIdentifier}';
  src: url('${font.url}');
}`;

// 直接设置style元素的文本内容
styleElement.textContent = rule;

console.log(styleElement); // 此时能看到@font-face规则已显示在<style>标签中

如果一定要使用sheet.insertRule方法，需要注意：这种方式添加的规则会生效，但浏览器不会将其同步到styleElement的innerHTML或textContent中（属于浏览器内部样式表的处理机制），所以你看不到标签内的规则文本，但样式依然正常工作。如果核心需求是让规则显示在<style>标签里，直接设置文本内容是最直接的方案。

内容的提问来源于stack exchange，提问作者pailhead