Pourquoi les polices s'affichent-elles différemment sous Windows et Mac ?

Incohérences de rendu des polices multiplateformes : résolution des divergences d'anticrénelage @font-face entre Windows et Mac

Dans le domaine du cross- Pour le développement d'une plateforme Web, obtenir un rendu cohérent des polices sur différents systèmes d'exploitation peut être une tâche déroutante. Un problème courant rencontré avec les kits @font-face est l'apparence variable des polices entre les systèmes Windows et Mac.

Un cas particulier de ce problème se produit lors de l'utilisation de polices créées par Fontsquirrel.com. Les développeurs rencontrent souvent une différence d'anticrénelage entre les deux plates-formes. Sous Windows, les polices peuvent paraître plus épaisses et plus grossières par rapport à leurs homologues Mac.

La solution : donner la priorité au format de police SVG pour Chrome

Après une exploration approfondie, une solution a été a émergé qui résout ces incohérences de rendu des polices multiplateformes. La clé réside dans la modification du code CSS généré par Fontsquirrel.com.

À l'origine, le code CSS suit cette structure :

@font-face {
    font-family: 'Font Name';
    src: url('font-file.eot');
    src: url('font-file.eot?#iefix') format('embedded-opentype'),
         url('font-file.woff') format('woff'),
         url('font-file.ttf') format('truetype'),
         url('font-file.svg#Font Name') format('svg');
    font-weight: normal;
    font-style: normal;
}

Cependant, pour les navigateurs Chrome sous Windows, il est essentiel de priorisez le format de police SVG en déplaçant la ligne appropriée au début de la liste src :

/* THIS WORKS FOR ME */
@font-face {
    font-family: 'Font Name';
    src: url('font-file.svg#Font Name') format('svg'),
         url('font-file.eot') format('embedded-opentype'),
         url('font-file.woff') format('woff'),
         url('font-file.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

En donnant la priorité au format SVG pour Chrome, le navigateur restituera la police avec un anti-aliasing optimal, ce qui entraînera un apparence cohérente sur les systèmes Windows et Mac.

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!