web-dev-qa-db-fra.com

Mauvais rendu de la police Chrome

Comment je répare ça?

Le premier "D" est rendu sur Chrome 31.0.1650.63 m et le deuxième sur IE11.

Chrome rendering

IE 11 rendering

Mettre à jour:

en ajoutant -webkit-font-smoothing: antialiased;, le problème persiste ....enter image description here

Cela pourrait être un problème avec la carte vidéo?

Mise à jour 2:

code de police css: 

 @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(../font/font1.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../font/font2.woff) format('woff');
}
css3google-chromewebfontsfont-awesome
15
edotassi

C'est un problème avec le moteur de rendu Chrome, mais il semble que cela va finalement être corrigé. Voir https://plus.google.com/u/0/+FrancoisBeaufort/posts/PGPpiQr6bwi } _

Le problème concerne le bugtracker de Chromium: https://code.google.com/p/chromium/issues/detail?id=333029https://code.google .com/p/chrome/issues/détail? id = 25541

MODIFIER:
La prise en charge de DirectWrite, qui permet un rendu des polices adapté, a été ajoutée à Chrome 37. (Source: https://code.google.com/p/chromium/issues/detail?id/ = 25541 # c152 )

14
Michał Dudak

Ceci est un problème avec Chrome lui-même. Le problème n'existe que sur Chrome pour Windows. Les utilisateurs Mac et Linux de Chrome n'ont pas ce problème. Vous ne pouvez rien y faire.

7
Pika3323

J'ai eu le même problème et le code suivant est le meilleur moyen de contourner ce que j'ai trouvé. Si vous masquez et affichez à nouveau le contenu du corps, la police se chargera correctement.

body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    font-family: folio_medium;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}
1
Jonathan Thurft

Avez-vous essayé d'ajouter ce CSS à celui de Chrome?

-webkit-font-smoothing: antialiased

Donnez un coup de feu et voir si cela aide. 

1
Fernker

J'ai constaté que donner une priorité plus élevée aux fichiers de police svg résout le problème.

@font-face {
  font-family: 'HelveticaNeueLTStd-Bd';
  src: url('../assets/fonts/helvetica/2B7A70_0_0.svg#wf') format('svg'), // first means higher priority
  url('../assets/fonts/helvetica/2B7A70_0_0.eot');
}
0
posit labs