Bad font rendering Chrome

问题

How i fix this?

First "D" is rendered on Chrome 31.0.1650.63 m and second is rendered on IE11.

Update:

adding -webkit-font-smoothing: antialiased; the problem remains...

It could be a problem with the video card?

Update 2:

css font code:

 @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');
}

回答1:

This is an issue with Chrome rendering engine but it looks like this is finally going to be fixed. See https://plus.google.com/u/0/+FrancoisBeaufort/posts/PGPpiQr6bwi

The issue is on Chromium's bugtracker: https://code.google.com/p/chromium/issues/detail?id=333029 https://code.google.com/p/chromium/issues/detail?id=25541

EDIT:
The DirectWrite support which enables pretty font rendering has been added to Chrome 37. (source: https://code.google.com/p/chromium/issues/detail?id=25541#c152)

回答2:

This is an issue with Chrome itself. The problem only exists on Chrome for Windows. Macs and Linux users of Chrome don't have this problem. There's nothing you can really do about it.

回答3:

Have you tried adding this CSS to the Chrome one?

-webkit-font-smoothing: antialiased

Give that a shot and see if it helps.

回答4:

I had the same problem and the following code is the best work around that I found. Somehow if you hide and re-show the content of the body the font will load properly Hope this helps

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; }
}

回答5:

I found that giving svg font files higher priority solves the issue.

@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');
}

来源：https://stackoverflow.com/questions/21018037/bad-font-rendering-chrome

标签

css3

google-chrome

webfonts

font-awesome