web-dev-qa-db-fra.com

anti-aliasing @ font-face sur windows et mac

J'ai utilisé http://www.fontsquirrel.com/ pour créer un kit @ font-face.
Cela fonctionne bien, mais le résultat sur Windows est différent du résultat sur mac.
Sous Windows, la police semble avoir un mauvais anti-aliasing:
Font face on Mac c'est le résultat sur Mac avec FF, Chrome ou Safari (tous mis à jour à la dernière version).
Font face on Windows c'est le résultat sous Windows avec FF ou Chrome. 

Comme vous pouvez le constater, le résultat n’est pas le même. Sous Windows, la police est plus épaisse et plus rugueuse.
Comment puis-je résoudre ça?

cssfont-faceantialiasingfont-embedding
25
pasine

Moi aussi, j'ai eu ce problème sur Chrome et je pense avoir trouvé la réponse!

Chrome n'aimait pas le CSS généré par défaut par fontsquirrel.com. 

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

Pour résoudre ce problème, j'ai déplacé la ligne SVG:

url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')

en haut de la liste. Maintenant, je vois des polices anti-alias! Je suppose que Chrome veut être le premier ...

/* THIS WORKS FOR ME */
@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.eot');
    src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
         url('/_styles/hlc/hl-webfont.eot?#iefix') 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;
}

J'espère que ça marchera pour toi aussi. Prendre plaisir!

48
maximo

Je suis surpris que personne n'ait mentionné cela. Appliquer un léger contour -webkit-text me convient, quel que soit le format (extension) de la police que vous utilisez. Certains recommandent un -webkit-text-stroke: 1px mais, à mon avis, la police est trop altérée (trop forte). Mais un 0.5px rend le trait presque imperceptible et active l'antialiasing:

-webkit-text-stroke: 0.5px;

Mettez-le dans votre définition CSS pour tag HTML et vous avez terminé!

14
Pere

Il existe également une police appelée Vegur qui ressemble à Myriad Pro mais qui est légale à intégrer dans un site Web . J'espère que cela vous aidera!

4
Maximilian Motel

J'ai fait quelques recherches et j'ai trouvé un hack qui, je pense, fait la différence. Mettez ceci dans votre CSS avec vos variables de police:

-webkit-transform: rotate(-0.0000000001deg);

De plus, je trouve qu'un noir complet (#000000) n'aide pas les choses non plus. L'utilisation d'un très sombre a semblé m'aider.

3
Sparky

Changer les paramètres dans Windows ou dans un navigateur n'est pas une solution. Lorsque vous utilisez @font-face, vous souhaitez que la police ait l’air agréable sur tous les écrans de tous les navigateurs, pas seulement sur le vôtre.

Le truc avec

text-shadow: 0 0 1px rgba(255,255,255,0.1);

ou

-webkit-transform: rotate(-0.0000000001deg);

ne fonctionne plus dans Chrome 16.0.912.63 m, Windows Vista.

Je ne pouvais pas trouver un moyen de surmonter ce problème cependant.

2
Lubo Zviera

Ceci est le code im utilisant pour résoudre "problème de rendu Chrome":

@font-face {
    font-family: 'fontname';
    src: url('fonts/fontname.eot');
    src: url('fonts/fontname.eot') format('embedded-opentype'),
    url('fonts/fontname.svg') format('svg');
}

/*if mozilla*/
@-moz-document url-prefix() { 
    @font-face {
        font-family: 'fontname';
        src: url('fonts/fontname.ttf') format('truetype');
    }
}

:) ça marche pour moi ... ENFIN!

2
apofiSSo

-webkit-transform: rotation (-0.0000000001deg);

Mise à jour: ne fonctionne plus dans Chrome 15.0.874.106 m. Bien que cela fonctionne dans IE9 et Firefox -> Zequez 4 nov. À 15:28

UPDATE: Cela fonctionne (au moins pour moi) dans Chrome 15.0.874.121 m.

IE9 et Firefox ne devraient pas en avoir besoin, ni être ciblés par celui-ci puisque le sélecteur spécifie -webkit-.

0
Matt Williams