Share
Dans cette astuce, je vais vous montrer comment appliquer des CSS basées sur le moteur de rendu du texte de chaque navigateur..
Voici la chose: en fonction de votre navigateur et du système d'exploitation, le texte affiché par votre navigateur sera affiché différemment. Cela peut poser problème aux concepteurs, en particulier à ceux qui s’efforcent de perfectionner les détails typographiques tels que la police, la taille, le poids, l’espacement, etc..
La même page affichée sur (de gauche à droite) Chrome Mac OS, Internet Explorer, Microsoft EdgeSi vous souhaitez plus de cohérence dans vos conceptions, une bibliothèque JavaScript du nom de Type Rendering Mix composé des légendes de la typographie vivante, Tim Brown et Bram Stein, vous aidera..
Cette bibliothèque détecte le rasterizer texte et le anti crénelage méthode utilisée par le navigateur et ajoute des classes à la html élément pour refléter les résultats, par exemple:
Dans notre exemple ci-dessus, nous souhaitons peut-être réduire le poids de la citation de bloc dans Chrome. Après avoir chargé le mélange de rendu de type dans la page, une inspection rapide révèle que la classe tr-coretext a été appliqué dans Chrome, reflétant le fait qu’il utilise Core Text (Mac OS et iOS) pour la pixellisation..
Nous pourrions alors cibler spécifiquement notre texte plus lourd en ajoutant une règle comme celle-ci à notre CSS:
.tr-coretext blockquote font-weight: 300; // Poids plus léger
Le mélange de rendu de type existe depuis un certain nombre d'années maintenant, mais il s'agit d'un outil simple et solide, offrant une aide fiable aux concepteurs qui souhaitent améliorer la façon dont leur type est rendu dans différents navigateurs..
Accentsconagua