@font-face pour personnaliser les polices, les polices qui ne sont pas lisse au Chrome

J'ai une application web à l'aide du CSS3 @font-face pour incorporer des polices personnalisées. Jusqu'à présent cela a fonctionne parfaitement sous IE et Firefox.

Avec Chrome, cependant, les polices personnalisées apparaissent pixélisé et pas lisse. Ci-dessous un lien vers un extrait d'un exemple de ma police dans Firefox & IE (en haut) et de Chrome (en bas):
Capture d'écran de comparaison

Il peut être difficile de voir la différence entre un petit exemple de capture d'écran, mais quand ce qui se passe sur toute la page, il est très sensible.

Ci-dessous est un exemple de la façon dont je suis l'aide de @font-face dans ma feuille de style:

@font-face 
{
    font-family: 'MyFont';
    src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'),
         url('../Content/fonts/MyFont.ttf') format('truetype');
}

Une autre chose peut-être la peine de mentionner, c'est que quand j'ai tirer vers le haut le site dans le navigateur en cours d'exécution sur une machine virtuelle, les polices sont SUPER agitée, bien pire que le Chrome exemple. Ce qui se passe lorsque j'utilise l'un de mes ordinateurs de l'école, qui sont tous en cours d'exécution Win7 VMWare ordinateurs de bureau. Il arrive aussi quand j'ai tirer vers le haut le site à partir d'un Windows 7 VM en cours d'exécution sur un ami Mac.

InformationsquelleAutor Danny | 2012-05-16
  1. 34

    C'est un problème connu que Chrome devs sont de fixation:

    http://code.google.com/p/chromium/issues/detail?id=137692

    Pour contourner jusqu'alors, essayez d'abord:

    html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
}

    Si cela ne fonctionne pas pour vous, ce travail autour fonctionné pour moi (ci-dessus n'a pas résolu windows Chrome):

    http://code.google.com/p/chromium/issues/detail?id=137692#c68

    il semble réorganisant le @font-face règle CSS pour permettre svg à apparaître "première" résout ce problème.

    exemple:

    -before--------------

@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}


-after--------------

@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.svg') format('svg'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
    • Fonctionnait très bien, merci!
    • Je ne peux pas croire que votre .svg technique effectivement travaillé. 5 haut!
    InformationsquelleAutor Evan
  2. 3

    Malheureusement, tous les navigateurs de rendu des polices différemment. Et celui qui a l'air ok on peut avoir de la peine à l'autre. Il n'est pas facile de trouver une bonne police de font-face... si vous voulez pixel perfection, vous devrez utiliser des images.

    Mais tout n'est pas perdu, voici 20 polices libres (gratuit pour un usage commercial, même!) qui rendent très bien (je finis toujours par vérification cette liste): http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/

    N'oubliez pas que vous ne pouvez pas héberger payé polices ou vous serait de les distribuer et vous pourriez vous retrouver en difficulté.

    • Malheureusement je n'ai pas de contrôle sur les polices de caractères utilisées. Le client a ses propres polices de caractères que je dois utiliser.
    • Si la lisibilité astuces ne fonctionnent pas, vous devrez expliquer à votre client que toutes les polices sont sans danger pour le web
    • Voir @Evan réponse ci-dessous - a travaillé pour moi dans Chrome 25 pour Windows
    InformationsquelleAutor Yisela
  3. 1

    Vous pouvez jouer avec les optimizeLegibility: http://aestheticallyloyal.com/public/optimize-legibility/

    Et aussi -webkit-font-smoothing: http://maxvoltar.com/archive/-webkit-font-smoothing

    Il pourrait également être utile d'utiliser des polices-les écureuils de police générateur pour générer votre webfonts et css à charger dans les polices de caractères:
    http://www.fontsquirrel.com/fontface/generator
    (même si je ne suis pas sûr si cela va résoudre votre problème ou pas)

    InformationsquelleAutor 13twelve
  4. 0

    Pour moi, le meilleur travaillé:

    @font-face {
    font-family: MyFont;
    src: url("MyFont.ttf") format('truetype');
}

h1 {
    font-family: MyFont;
    -webkit-text-stroke: 0.5pt;
    -webkit-font-smoothing: antialiased;
}
    InformationsquelleAutor Tires
  5. 0

    Je conseille ceci:

    -webkit-text-stroke: 0.3pt;
-webkit-font-smoothing: antialiased;
    InformationsquelleAutor Cas Bloem
  6. 0

    Essayez d'ajouter -webkit-transform: translateZ(1px); ou un autre de transformation 3d.

    explication:

    Chrome a un autre bug - texte flou lorsque les transformations 3d appliquée, de sorte que l'ajout proposé de propriété sera flou haché texte et partiellement résoudre le problème. Il est encore un peu floue, mais dans de nombreux cas, il est préférable ensuite coupé une.

    exemple1(question): haché de texte. J'ai ajouté de rotation ici pour être sûr que le texte devient haché.

    exemple2(résolu): semi-lisse texte. L'application de transformation 3d rend le texte floues, donc haché texte semble plus lisse.

    Le problème, c'est qu'on dirait que nous ne pouvez pas cibler uniquement les versions de Windows de Chrome dans le CSS, donc, il faut utiliser javascript pour appliquer la classe.

    InformationsquelleAutor sol0mka