Comment obtenir un anticrénelage cohérent pour @font-face sur Windows et Mac ?

Cohérence de l'anti-aliasing multiplateforme @font-face

Problème

Lors de la mise en œuvre @font-face dans les environnements Windows et Mac, des incohérences dans le rendu des polices causées par des différences d'anticrénelage peuvent survenir. Sous Windows, les polices apparaissent plus épaisses et plus rugueuses que sur Mac. Cet écart pose un défi pour parvenir à une typographie cohérente sur toutes les plateformes.

Solution

Le problème peut être résolu en modifiant le code CSS généré, en particulier l'ordre dans lequel la police les sources sont spécifiées.

Implémentation

1. Déplacer le format SVG en haut du CSS : En plaçant la source de la police SVG au début de la liste des attributs src, nous nous assurons que Chrome donne la priorité à ce format.
2. Code CSS mis à jour :

@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 suivant cette approche, Chrome restitue de manière appropriée les polices avec un anti-aliasing correct, correspondant à l'apparence sur Mac et garantissant la cohérence entre 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!