Comment obtenir un rendu de police cohérent entre Windows et macOS à l'aide de @font-face ?

Résoudre les incohérences de rendu des polices entre Windows et macOS à l'aide de @font-face

L'incorporation de polices personnalisées dans les conceptions Web à l'aide de @font-face est une pratique courante. Cependant, les utilisateurs ont parfois rencontré de subtiles variations dans le rendu des polices entre les systèmes Windows et macOS. Ce problème se manifeste souvent par une différence d'anticrénelage, où la police apparaît plus épaisse et plus grossière sous Windows que sous macOS.

Pour résoudre ce problème, il est important de comprendre que les navigateurs Web interprètent et restituent les polices différemment selon les plates-formes. . Les navigateurs sous Windows préfèrent généralement les polices TrueType (TTF), tandis que les navigateurs macOS privilégient les polices Web Open Font Format (WOFF).

La clé pour résoudre l'incohérence de rendu réside dans l'optimisation de la déclaration @font-face pour donner la priorité aux polices appropriées. format de police pour chaque plateforme. Dans l'extrait de code fourni, la préférence de Chrome pour les polices SVG par rapport aux autres formats sous Windows pose problème.

Pour remédier à cela, réorganisez la déclaration @font-face en plaçant le format de police SVG en haut de la liste. Cela garantit que Chrome chargera et affichera la police SVG, ce qui entraînera un anticrénelage cohérent sur les systèmes Windows et macOS :

@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
         url('/_styles/hlc/hl-webfont.eot') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

En implémentant cette simple modification, le rendu de la police devrait désormais être cohérent et anti- correctement alias sur Windows et macOS, améliorant ainsi l'expérience utilisateur sur toutes les plates-formes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!