CSS: @font-face anti aliasing

Je suis un peu du mal avec le @font-face CSS. Après beaucoup de lecture, essayer, réessayer, j'ai enfin tombé sur un site qui fait de vous un prêt-à-go package lorsque vous téléchargez votre police. Il fonctionne maintenant, mais il semble que la police n'obtient pas d'anti-aliasing. Tandis que je vois ce qui se passe à d'autres sites web, mine de ne pas rendre les en-têtes de la façon dont 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;}

Ce qu'il reste à faire pour faire de cette dernière, mais souvent embêtant, question de s'en aller?

InformationsquelleAutor Ben | 2010-08-10
  1. 16

    Avec CSS3, vous pouvez utiliser le police-lisse de propriété, bien que l'anticrénelage toujours être contrôlés par le système par défaut. Si vous avez vraiment besoin de la force propre de l'antialiasing n'importe ce que le système d'exploitation, vous devez utiliser sIFR qui remplace automatiquement le texte avec un composant Flash.

    • Merci pour votre réponse, je vais essayer avec sIFR maintenant.
    • Je peux aussi recommander Cufón au lieu de sIFR, de sorte que vous n'avez pas besoin de Flash pour afficher les polices (je pense à tous les Flashblock les utilisateurs, et les utilisateurs de iPhone/iPad, en plus de ceux qui sont tout simplement ennuyés par Flash): cufon.shoqolate.com/generate
    • developer.mozilla.org/en/CSS/font-smooth: font-smooth a été retiré de la CSS à la spécification de police et n'est actuellement pas sur la voie ordinaire. Certains navigateurs mobiles soutiennent. Webkit prend en charge quelque chose de similaire.
    InformationsquelleAutor Chman
  2. 63

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

    L'essentiel est que l'ajout de text-shadow: 0 0 1px rgba(0,0,0,0.3); donne l'apparence de l'anti-aliasing.

    • Merci! +1 pour vous;)
    • Très bonne réponse! A parfaitement fonctionné !
    • 🙂 excellente CSS3 hack!
    • Nice one! Avec du texte en blanc, vous vous retrouvez avec un effet lumineux, mais c'est plutôt cool.
    • Ahah!!! Enfin vous suis, Monsieur le Windows! (Pas vraiment, mais un peu, et c'est assez bon.)
    • C'est une excellente suggestion 🙂
    • Très bonne suggestion, merci.
    • cool ! mais ne serait-il affecter les performances de problème?

    InformationsquelleAutor user9538
  3. 3

    Juste une petite remarque sur une pas si commun de la règle CSS pour faire face à lisser.

    -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 semble plus clair et mince. D'autres valeurs:

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

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

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

    InformationsquelleAutor Steve
  4. 1

    Cufon et Typeface.js sont deux solutions de l'agrégat et de désinfecter beaucoup de HTML5, CSS3 et JS solutions présentées dans ce thread.

    Chacun a un convertisseur permettant à des fichiers de police (ttf, otf, wotf) pour être converti pour les scripts qui ne de ce que vous essayez de le faire -- livrer n'importe quelle police sur le web, l'anticrénelage.

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

    InformationsquelleAutor Rowan
  5. 0

    Vous avez besoin de convertir la FTO à WOFF:

    OTF -> WOFF (qui Fonctionne!)

    TTF -> OTF -> WOFF (qui Fonctionne!)

    TTF -> WOFF (lissage automatique Ne fonctionne pas, erreur commune dans Google Polices)

    1º) Télécharger la La FTO version de la police

    1º alternative) Si la police est aux autres et TTF, de le convertir à la FTO avec https://everythingfonts.com/ttf-to-otf

    2º) de Convertir la FTO à WOFF https://everythingfonts.com/otf-to-woff

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

    InformationsquelleAutor lucasgabmoreno