CSS 糟糕的字体渲染 Chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21018037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bad font rendering Chrome
提问by edotassi
How i fix this?
我如何解决这个问题？
First "D" is rendered on Chrome 31.0.1650.63 m and second is rendered on IE11.
第一个“D”在 Chrome 31.0.1650.63 m 上呈现，第二个在 IE11 上呈现。
Update:
更新：
adding -webkit-font-smoothing: antialiased;the problem remains...
添加-webkit-font-smoothing: antialiased;问题仍然存在...
It could be a problem with the video card?
会不会是显卡的问题？
Update 2:
更新 2：
css font code:
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');
}
采纳答案by Micha? Dudak
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
这是 Chrome 渲染引擎的一个问题，但看起来这最终会得到修复。见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=333029https://code.google.com/p/chromium/issues/detail?id=25541
问题出在 Chromium 的错误跟踪器上：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)
编辑：
支持漂亮字体渲染的 DirectWrite 支持已添加到 Chrome 37。（来源：https: //code.google.com/p/chromium/issues/detail? id=25541#c152）
回答by Pika3323
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.
这是 Chrome 本身的问题。该问题仅存在于 Windows 版 Chrome 上。Chrome 的 Mac 和 Linux 用户没有这个问题。对此你真的无能为力。
回答by Jonathan Thurft
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; }
}
回答by Fernker
Have you tried adding this CSS to the Chrome one?
您是否尝试将此 CSS 添加到 Chrome 中？
-webkit-font-smoothing: antialiased
-webkit-font-smoothing: antialiased
Give that a shot and see if it helps.
试一试，看看它是否有帮助。
回答by posit labs
I found that giving svg font files higher priority solves the issue.
我发现给 svg 字体文件更高的优先级可以解决这个问题。
@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');
}
