web-dev-qa-db-fra.com

@ font-face pour les polices personnalisées, les polices ne sont pas lisses dans Chrome

J'ai une application Web qui utilise @ font-face de CSS3 pour incorporer des polices personnalisées. Jusqu'à présent, cela fonctionne parfaitement dans IE et Firefox. 

Avec Chrome, toutefois, les polices personnalisées apparaissent pixellisées et non lisses. Vous trouverez ci-dessous un lien vers un extrait d’écran contenant un exemple de ma police dans Firefox & IE (haut) et Chrome (bas): Comparaison de captures d'écran

Il est peut-être difficile de voir la différence dans un échantillon d'écran aussi petit, mais lorsque cela se produit sur toute la page, cela est très visible. 

Vous trouverez ci-dessous un exemple d'utilisation 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 qui mérite peut-être d’être mentionnée, c’est que lorsque je visite le site dans TOUT navigateur utilisant une machine virtuelle, les polices sont très agitées, bien pire que l’exemple de Chrome. Cela se produit lorsque j'utilise l'un des ordinateurs de mon école, qui exécutent tous des ordinateurs de bureau Win7 VMWare. Cela se produit également lorsque je sors du site à partir d'un Windows 7 VM s'exécutant sur le Mac d'un ami. 

cssgoogle-chromecss3fontsfont-face
18
Danny

Il s'agit d'un problème connu que les développeurs de Chrome résolvent:

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

Pour contourner le problème jusqu'à la première tentative:

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

Si cela ne fonctionne pas pour vous, cette solution de contournement a fonctionné pour moi (ci-dessus ne corrige pas Windows Chrome):

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

il semble que la réorganisation de la règle CSS @ font-face pour permettre à svg d'apparaître "en premier" corrige 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;
}
34
Evan

Malheureusement, tous les navigateurs rendent les polices différemment. Et un qui a l'air bien dans l'un pourrait avoir du mal dans un autre. Ce n'est pas si facile de trouver une bonne police pour font-face ... si vous voulez une perfection en pixels, vous devrez utiliser des images. 

Mais tout n’est pas perdu, voici 20 polices gratuites (même à usage commercial!) Qui rendent assez bien (je vérifie toujours cette liste): http://speckyboy.com/2010/07/04/25 -totalement-libre-polices-parfait-pour-fontface/

N'oubliez pas que vous ne pouvez pas héberger des polices payées, sinon vous pourriez les distribuer et vous pourriez vous retrouver dans le pétrin.

3
Yisela

Vous pouvez jouer avec optimLégibility: http://aestheticalloyal.com/public/optimize-legibility/

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

Il peut également être utile d’utiliser le générateur de polices font-squirrels pour générer vos polices Web et CSS à charger dans les polices: http://www.fontsquirrel.com/fontface/generator (bien que je ne sois pas sûr que cela résoudra ou non votre problème)

1
13twelve

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

explication:

Chrome a un autre bogue: le texte flou lorsque des transformations 3d sont appliquées. L'ajout de la propriété suggérée va donc brouiller le texte coupé et résoudre partiellement le problème. Il est encore un peu flou, mais dans de nombreux cas, il est préférable d’en couper un. 

example1 (issue): texte haché . J'ai ajouté la rotation ici pour m'assurer que le texte est coupé.
example2 (résolu): texte semi-lisse . L'application de la transformation 3D rend le texte flou, de sorte que le texte coupé semble plus lisse.

Le petit problème est qu'il semble que nous ne pouvons pas cibler uniquement les versions Windows de Chrome en CSS, nous devons donc utiliser javascript pour appliquer la classe appropriée.

0
sol0mka

Je suggère d'utiliser ceci:

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

Ce problème sera résolu avec Chrome 37. 

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

0
moettinger

Pour moi, le mieux 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;
}
0
Tires