如何全局應用CSS屬性'font-display'？

我想將用戶樣式表製作爲Chrome擴展程序，對於任何@font-face規則，這將覆蓋默認的font-display CSS屬性，font-display: swap。無論加載Web字體的方式如何（<link rel="stylesheet">,@import，內聯@font-face），它都應該可以在任何網頁上工作。我怎樣才能做到這一點？如何全局應用CSS屬性'font-display'？

來源

2017-09-01 niutech

我建議您閱讀[Chrome擴展程序概述]（https://developer.chrome.com/extensions/overview）（可能與從概述鏈接的頁面一起）。 [體系結構部分]（https://developer.chrome.com/extensions/overview#arch）具有全面的體系結構信息，這些信息應該有助於您理解組織/完成情況的方式。您還需要閱讀[內容腳本]（https://developer.chrome.com/extensions/content_scripts）。 – Makyen

@Makyen相信我，我知道這一切，我已經做了多個Chrome擴展。我的問題是重寫在任何網站上運行的內容腳本中的'font-display' CSS屬性。 – niutech

一種方法是使用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-方式？

來源

2017-09-01 16:17:58 niutech

如何全局應用CSS屬性'font-display'？

回答

相關問題