faux pas
1.0.0
Un script pour mettre en évidence des éléments qui sont incorrects incorrectement aux blocs de Font-Face, ce qui peut entraîner un faux rendu italique en faux body ou en faux. Fonctionne autonome - pas de dépendances.
Vous voulez cela sur la ligne de commande? Découvrez node-faux-pas .
Une page de test plus complète est également disponible.
Lorsque vous incluez un bloc CSS @font-face sur votre page, vous spécifiez une font-family , font-weight et font-style à l'intérieur de ce bloc. Lorsque vous utilisez une police Web, vous spécifiez ces mêmes propriétés sur les éléments de votre page. Bien que vous deviez correspondre à la valeur de font-family exactement pour utiliser la police Web, font-weight et font-style ne nécessitent pas de correspondance exacte. Cela peut conduire à un comportement inattendu car le navigateur utilise ce qui est disponible, même si ce n'est pas une bonne correspondance.
De plus, si votre élément veut un font-weight inférieur ou égal à 500 , mais que votre bloc @font-face n'a que des variantes de votre police qui sont audacieuses, le navigateur tentera de synthétiser une police Web audacieuse pour vous. Ce rendu synthétisé est souvent inférieur à la parole. La même synthèse se produit lorsque vous voulez de l'italique, mais aucune police Web italique n'est disponible. Ce comportement pourrait être contrôlé avec la propriété font-synthesis si les navigateurs le soutenaient.
faux-pas vous aide en enregistrant et en rapportant ces décalages et faux rendus afin que vous puissiez corriger le code offensant.
Disponible sur NPM en tant que fg-faux-pas :
npm install --save-dev fg-faux-pas
faux-pas.js et faux-pas.init.js (Astuce: utilisez votre propre fichier init pour modifier les options de configuration).node-faux-pas console: true : utilise console pour produire des informations de journalisation complètes (avertissements pour les éléments et erreurs incompatibles pour le rendu fausse).highlights: true : ajoute un style spécifique à des éléments incompatibles / faux sur la page pour l'inspection visuelle.mismatches: true : Un décalage peut ne pas être un faux rendu même s'il s'agit d'une erreur de configuration - cette option vous permet de désactiver ces avertissements. Tout ce qui prend en charge l'API de chargement de police CSS:
Utilisez gulp pour générer un nouveau fichier DOCS HTML (met automatiquement à jour le bookmarklet avec le dernier code).
