如何全局应用CSS 属性 'font-display'？

Question

我想将用户样式 sheet 作为 Chrome 扩展，这将覆盖默认 font-display CSS 属性 和 font-display: swap 对于任何 @font-face 规则。它应该适用于任何网页，无论加载网络字体的方式如何（<link rel="stylesheet">、@import、内联 @font-face）。我怎样才能做到这一点？

Answer 1

一种方法是使用 JavaScript 以枚举内容脚本中的所有 @font-face 规则：

[].slice.call(document.styleSheets).forEach(function (sheet) {
    [].slice.call(sheet.cssRules || []).forEach(function (rule) {
        if (rule.type === CSSRule.FONT_FACE_RULE) rule.style.fontDisplay = 'swap';
    });
});

有人知道 CSS 唯一的方法吗？