web-dev-qa-db-fra.com

CSS: anti-aliasing @ font-face

Je suis un peu en difficulté avec l'option CSS @ font-face. Après beaucoup de lectures, d'essais, de tentatives, j'ai finalement trouvé un site Web qui fait de vous un paquet prêt à l'emploi lorsque vous téléchargez votre police. Il fonctionne maintenant mais il semble que la police ne soit pas anti-aliasée. Bien que cela se produise sur d’autres sites Web, le mien ne donne pas les en-têtes comme je le veux.

Mon code CSS:

@font-face {
font-family: 'YanoneKaffeesatzThin';
src: url('../fonts/yanonekaffeesatzthin-webfont.eot');
src: local('☺'), url('../fonts/yanonekaffeesatzthin-webfont.woff') format('woff'), url('../fonts/yanonekaffeesatzthin-webfont.ttf') format('truetype'), url('../fontsyanonekaffeesatzthin-webfont.svg#webfontyC5sm3N9') format('svg');
font-weight: normal;
font-style: normal;}

Que reste-t-il à faire pour faire durer ce problème, si anodin,?

cssrenderingfont-face
20
Ben

Avec CSS3, vous pouvez utiliser la propriété font-smooth , bien que l’anticrénelage soit toujours contrôlé par les valeurs par défaut du système. Si vous devez réellement forcer un antialiasing propre, quel que soit le système d'exploitation, vous devez utiliser sIFR, qui remplace automatiquement le texte par un composant Flash.

15
Chman

Voir aussi: http://www.elfboy.com/blog/text-shadow_anti-aliasing/

En résumé, l'ajout de text-shadow: 0 0 1px rgba(0,0,0,0.3); donne l'apparence d'un anti-aliasing.

63
user9538

Juste une petite note sur une règle CSS peu commune pour traiter les antialias.

-webkit-font-smoothing: antialiased;

Vous aurez une légère variation dans le rendu des polices pour les navigateurs Webkit. Généralement, la police apparaît plus claire et fine. Autres valeurs:

-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: none;

Une page de démonstration: http://maxvoltar.com/sandbox/fontsmoothing/

Ne pas oublier https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions

3
Steve

Cufon et Typeface.js sont deux solutions qui regroupent et désinfectent bon nombre des solutions HTML5, CSS3 et JS décrites dans ce fil de discussion.

Chacun dispose d'un convertisseur permettant aux fichiers de polices (ttf, otf, wotf) d'être convertis en scripts qui font ce que vous essayez de faire: distribuer n'importe quelle police sur le Web, avec anti-aliasing.

Des deux, je préfère Cufon http://cufon.shoqolate.com/generate/

1
Rowan

Vous devez convertir OTF en WOFF:

OTF -> WOFF (ça marche!)

TTF -> OTF -> WOFF (Fonctionne!)

TTF -> WOFF (Ne fonctionne pas antialising, erreur commune dans Google Fonts )

1º) Téléchargez la version de police OTF

1º alternative) Si la police est autre et est TTF, convertissez-la en OTF avec https://everythingfonts.com/ttf-to-otf

2º) Convertir OTF en WOFF https://everythingfonts.com/otf-to-woff

Utilisez uniquement WOFF, pas EOT, SVG, WOFF2, etc.

0
lucasgabmoreno