Comment appliquer la propriété CSS 'font-display' globalement?

Je souhaite créer une feuille de style utilisateur en tant qu'extension Chrome, qui remplacera la propriété CSS par défaut font-display avec font-display: swap pour toute règle @font-face. Il devrait fonctionner sur n'importe quelle page Web, quel que soit le mode de chargement des polices Web (<link rel="stylesheet">, @import, inline @font-face). Comment puis je faire ça?Comment appliquer la propriété CSS 'font-display' globalement?

Source

2017-09-01 niutech

Je vous suggère de lire la [Vue d'ensemble de l'extension Chrome] (https://developer.chrome.com/extensions/overview) (peut-être avec les pages liées de la vue d'ensemble). La section [architecture] (https://developer.chrome.com/extensions/overview#arch) contient des informations générales sur l'architecture qui devraient vous aider à comprendre comment les choses sont généralement organisées/réalisées. Vous voudrez également lire [Content Scripts] (https://developer.chrome.com/extensions/content_scripts). – Makyen

@Makyen Croyez-moi, je sais tout cela, j'ai déjà fait plusieurs extensions Chrome. Ma question concerne la substitution de la propriété CSS 'font-display' dans un script de contenu exécuté sur n'importe quel site Web. – niutech

Une façon est d'utiliser JavaScript afin d'énumérer toutes les règles @font-face dans un script de contenu:

[].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'; 
    }); 
});

Est-ce que quelqu'un sait le chemin CSS seulement?

Source

2017-09-01 16:17:58 niutech

Comment appliquer la propriété CSS 'font-display' globalement?

Répondre

Questions connexes