CSS @font-face 用于自定义字体，Chrome 中的字体不流畅
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10627209/
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
@font-face for custom fonts, fonts not smooth in Chrome
提问by Danny
I have a web application that is using CSS3's @font-face to embed custom fonts. So far this has works perfectly in IE and Firefox.
我有一个使用 CSS3 的 @font-face 嵌入自定义字体的 Web 应用程序。到目前为止，这已在 IE 和 Firefox 中完美运行。
With Chrome, however, the custom fonts appear pixelated and not smooth. Below is a link to a screen snippet of an example of my font in Firefox & IE (top) and Chrome (bottom): Screenshot comparison
但是，使用 Chrome 时，自定义字体显示为像素化且不平滑。下面是我在 Firefox 和 IE（顶部）和 Chrome（底部）中的字体示例的屏幕片段链接： 屏幕截图比较
It might be hard to see the difference in such a small sample screenshot, but when this is happening all over the page it is very noticeable.
在这么小的示例屏幕截图中可能很难看出差异，但是当这种情况发生在整个页面时，它是非常明显的。
Below is an example of how I'm using @font-face in my stylesheet:
下面是我如何在样式表中使用 @font-face 的示例：
@font-face
{
font-family: 'MyFont';
src: url('../Content/fonts/MyFont.eot?') format('embedded-opentype'),
url('../Content/fonts/MyFont.ttf') format('truetype');
}
Another thing possibly worth mentioning, is that when I pull up the site in ANY browser running on a VM, the fonts are SUPER choppy, much worse than the Chrome example. This is happening when I use any of my school computers, which are all running Win7 VMWare desktops. It also happens when I pull up the site from a Windows 7 VM running on a friend's Mac.
另一件可能值得一提的事情是，当我在 VM 上运行的任何浏览器中打开该站点时，字体都非常不稳定，比 Chrome 示例要糟糕得多。当我使用任何运行 Win7 VMWare 桌面的学校计算机时，就会发生这种情况。当我从朋友的 Mac 上运行的 Windows 7 VM 中拉出站点时，也会发生这种情况。
回答by Evan
This is a known issue that Chrome devs are fixing:
这是 Chrome 开发人员正在修复的一个已知问题：
http://code.google.com/p/chromium/issues/detail?id=137692
http://code.google.com/p/chromium/issues/detail?id=137692
To work around until then first try:
要解决此问题，请先尝试：
html {
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}
If this does not work for you, this work-around worked for me (above did not fix windows Chrome):
如果这对你不起作用，这个解决方法对我有用（上面没有修复 Windows Chrome）：
http://code.google.com/p/chromium/issues/detail?id=137692#c68
http://code.google.com/p/chromium/issues/detail?id=137692#c68
it appears rearranging the @font-face CSS rule to allow svg's to appear 'first' fixes this problem.
似乎重新排列 @font-face CSS 规则以允许 svg 出现“首先”解决了这个问题。
example:
例子：
-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;
}
回答by Yisela
Unfortunately, all browsers render fonts differently. And one that looks ok in one might have trouble in another. It's not that easy to find a good font for font-face... if you want pixel perfection you will have to use images.
不幸的是，所有浏览器都以不同的方式呈现字体。一个看起来不错的可能在另一个中遇到麻烦。为 font-face 找到一种好的字体并不容易......如果你想要像素完美，你将不得不使用图像。
But not all is lost, here are 20 free fonts (free for commercial use even!) that render quite nicely (I always end up checking this list): http://speckyboy.com/2010/07/04/25-completely-free-fonts-perfect-for-fontface/
但并不是所有的都丢失了，这里有 20 种免费字体（甚至免费用于商业用途！），它们呈现得非常好（我总是最终检查这个列表）：http: //speckyboy.com/2010/07/04/25-completely -free-fonts-perfect-for-fontface/
Remember that you can't host paid fonts or you would be distributing them and you could end up in trouble.
请记住，您不能托管付费字体，否则您将分发它们，最终可能会遇到麻烦。
回答by 13twelve
You may want to play with optimizeLegibility: http://aestheticallyloyal.com/public/optimize-legibility/
您可能想使用 optimizeLegibility：http: //aestheticallyloyal.com/public/optimize-legibility/
And also -webkit-font-smoothing: http://maxvoltar.com/archive/-webkit-font-smoothing
还有-webkit-font-smoothing：http: //maxvoltar.com/archive/-webkit-font-smoothing
It might also be worth using font-squirrels font generator to generate your webfonts and css to load in the fonts: http://www.fontsquirrel.com/fontface/generator(though I'm not sure if that will fix your problem or not)
也可能值得使用 font-squirrels 字体生成器来生成您的 webfonts 和 css 以加载字体：http: //www.fontsquirrel.com/fontface/generator（尽管我不确定这是否会解决您的问题或不是）
回答by Tires
For me, best worked:
对我来说，最好的工作：
@font-face {
font-family: MyFont;
src: url("MyFont.ttf") format('truetype');
}
h1 {
font-family: MyFont;
-webkit-text-stroke: 0.5pt;
-webkit-font-smoothing: antialiased;
}
回答by Cas Bloem
I would suggest using this:
我建议使用这个：
-webkit-text-stroke: 0.3pt;
-webkit-font-smoothing: antialiased;
回答by sol0mka
Try to add -webkit-transform: translateZ(1px);or another 3d transform.
尝试添加-webkit-transform: translateZ(1px); 或其他 3d 变换。
explanation:
解释：
Chrome has another bug - blurry text when 3d transforms applied, so adding suggested property will blur chopped text and partially solve the issue. It is still a little bit blurry, but in many cases it is better then chopped one.
Chrome 有另一个错误 - 应用 3d 变换时文本模糊，因此添加建议的属性将模糊切碎的文本并部分解决问题。它仍然有点模糊，但在许多情况下，它比切碎一个更好。
example1(issue): chopped text. I've added rotation here to be sure text gets chopped.
example2(solved): semi-smooth text. Applying 3d transform makes text blurry, so chopped text seems more smooth.
示例 1（问题）：切碎的文本。我在这里添加了旋转以确保文本被切碎。
示例2（已解决）：半平滑文本。应用 3d 变换会使文本变得模糊，因此切碎的文本看起来更平滑。
The small problem is that looks like we can't target only Windows versions of Chrome in CSS, so we have to use javascript to apply appropriate class.
小问题是看起来我们不能在 CSS 中只针对 Windows 版本的 Chrome，所以我们必须使用 javascript 来应用适当的类。
回答by moettinger
This issue will be resolved with Chrome 37.
此问题将通过 Chrome 37 解决。
http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html
http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html
