8
votes

Police Web en chrome

J'ai une webfont qui a l'air incroyable sur Firefox, pas tellement sur chrome. J'ai essayé de jouer avec la propriété code> Text-Rendering, avec des résultats moins que spectaculaires. Mon CSS est quelque chose comme ceci:

@font-face {
    font-family: 'TextFont';
    src: url('[my font file url]') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: TextFont, Tahoma, Geneva, sans-serif;
    text-rendering: auto;
}

css webfonts text-rendering

5 commentaires

Chrome est terrible lors de la rendu des polices sous Windows, et c'est un problème plus ou moins inflexible (à moins que Google ne décide d'utiliser ClearType). C'est pourquoi vous devriez passer à Linux;)

Je n'ai aucun problème à passer à Linux, mais j'en ai besoin de bien paraître partout

Je suis sarcastique à propos de Linux, mais je n'ai jamais eu de chance avec des polices personnalisées sur chrome.

Vous voudrez peut-être essayer de servir le fichier SVG en premier. Ce n'est pas pour tout le monde, mais vous voudrez peut-être l'essayer. Nous avons écrit un article de blog à ce sujet. Vous pouvez la lire ici: Fontspring.com/blog/smoother-web- Font-rendu-chrome

@Fontspring - Merci d'avoir souligné cela - j'étais tellement déçu lorsque la police de la marque avait l'air si triste dans Chrome; Serviant le SVG d'abord a fait un monde de différence. Gloire!

5 Réponses :

1
votes

C'est comme ça que je fais tout le mien et cela a fonctionné sur IE, Firefox, Chrome

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

}
body{
font: 12px 'NeutraTextBold', sans-serif;
color: #FFF;
}

1 commentaires

Je ne sais pas pourquoi j'ai eu un bowvote pour cela, essayez simplement d'aider avec ce qui me semble une réponse valide. Si quelqu'un se soucie de partager avec moi sur la raison pour laquelle elle est révélée pour que je sache pour une référence future.

0
votes

Il n'y a vraiment rien que vous puissiez faire pour améliorer cela via CSS. Les moteurs de rendu de texte sont différents entre Firefox et Chrome et vous voyez les résultats. Si la police n'est pas correctement affitée et préparée pour une police Web, vous pouvez vous attendre à des résultats comme celui-ci pour être amélioré.

Où la police a-t-elle été acquise?

Vous pouvez essayer de l'exécuter via des fontsquirrel pour voir si l'un de l'indication automatique des offres d'éthan peut normaliser cela un peu.

Quelques informations supplémentaires sur le rendu et la DIRETWRITE, ce que vous constatez comme les grands différenciateurs .... http: //blogs.adobe.com/typlography/2010/11/microsoft-directwrite-is-ning.html < / p>

1 commentaires

Espérons qu'un jour chrome sera réparer cela. Suivre le bug ici: code.google.com/p/chromium/issues / détail? id = 137692

2
votes

Essayez ceci:

 -webkit-text-stroke: .5px

0 commentaires

3
votes

Je ne sais pas si c'est ce que vous voyez, mais Chrome a un problème avec des polices anti-aliasing et TrueType. Selon http://www.fontSpring.com/blog/smoother-web -font-renduering-chrome , vous pouvez spécifier la police SVG avant le TrueType dans votre Font-face, par exemple:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); 
src: url('webfont.eot?#iefix') format('embedded-opentype'),
    url('webfont.svg#svgFontName') format('svg'),
    url('webfont.woff') format('woff'),
    url('webfont.ttf')  format('truetype');
}

2 commentaires

Soyez prudent avec copier / coller ce qui précède - les caractères de devis sont des "citations simples" et non des apostrophes. (CSS ne les comprend pas)

Yikes! J'ai corrigé les apostrophes. Merci pour la note.

0
votes

Chrome a été appliqué à Chrome 37, ils passeront de l'interface de périphérique graphique Windows à l'API Directwrite de Microsoft, une technologie qui améliore la manière dont les polices ont l'air des écrans modernes.

La bêta est maintenant sortie: https://www.google.com/chrome/browser/beta.html

de Google: http://blog.chromium.org/ 2014/07 / chrome-37-beta-Directwrite-on-windows.html

0 commentaires