如何全局应用 CSS 属性“font-display”？答案

【问题标题】：How to apply the CSS property 'font-display' globally?如何全局应用 CSS 属性“font-display”？
【发布时间】：2017-09-02 00:24:19
【问题描述】：

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

【问题讨论】：

我建议您阅读Chrome extension overview（也许连同从概述链接的页面）。 architecture section 具有整体架构信息，应该有助于您了解事物的一般组织/完成方式。您还需要阅读Content Scripts。
@Makyen 相信我，我知道这一切，我已经制作了多个 Chrome 扩展程序。我的问题是关于在任何网站上运行的内容脚本中覆盖 font-display CSS 属性。

标签： css google-chrome-extension font-face webfonts google-webfonts

【解决方案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 的方式吗？

【讨论】：

感谢您的写作，我将其添加为全局用户脚本，并将测试它是否有效。如果尚未加载 webfonts，我个人讨厌网站拒绝我查看他们的文本。任何依赖于手动计算布局的不变字体指标的人都应该停止使用 JS，让浏览器来完成布局工作。