Pourquoi les kits @font-face s'affichent-ils différemment sous Windows et Mac ?

Disparités d'anti-aliasing dans les kits @font-face sur Windows et Mac

La mise en œuvre des kits @font-face utilisant les polices de Font Squirrel peut entraîner des différences notables de rendu entre les systèmes d'exploitation Windows et Mac. Plus précisément, les polices peuvent présenter une épaisseur plus prononcée et un manque de fluidité sur les plates-formes Windows.

Pour résoudre ce problème, il a été découvert que Chrome sous Windows n'aime pas particulièrement le CSS par défaut généré par Font Squirrel. La solution réside dans la modification de l'ordre de la propriété src dans la règle @font-face.

En déplaçant la ligne du format SVG en haut de la liste, le problème d'anti-aliasing peut être résolu. Voici un exemple du code @font-face modifié :

@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;
}

Cette modification s'est avérée efficace pour résoudre la disparité d'anticrénelage entre les systèmes Windows et Mac, garantissant que les polices conservent le niveau souhaité de douceur et de clarté. .

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!