在 Windows 上使用 ClearType 使 CSS3 @font-face 字体渲染效果很好
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5086408/
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
Making CSS3 @font-face font rendering play nice with ClearType on Windows
提问by segfault
First some background information.
首先是一些背景信息。
It seems that using the CSS3 @font-face rule can interact in unexpected and undesired ways with ClearType font renderingv in any browser, on any version of Windows (XP and above.)
似乎使用 CSS3 @font-face 规则可以在任何浏览器、任何版本的 Windows（XP 及更高版本）上以意想不到的方式与 ClearType 字体渲染交互。
I first documented this as a Google Font Directory bugwhen I ran into it. Further research seems to yield conflicting information; having ClearType enabled or disabled can either help or hurt how a @font-face font renders in any web browser in Windows. Whether ClearType helps or hurts seems to be totally dependent on the font(s) being used, and what kind of hinting is built into them.
当我遇到它时，我首先将其记录为Google 字体目录错误。进一步的研究似乎产生了相互矛盾的信息；启用或禁用 ClearType 可以帮助或损害 @font-face 字体在 Windows 中的任何 Web 浏览器中的呈现方式。ClearType 是帮助还是伤害似乎完全取决于所使用的字体，以及它们内置的提示类型。
For example, a thread on TypeKit's support siteseems to point to font rendering problems when ClearType is DISABLED. However, a jQuery plug-inwas developed to improve font rendering when ClearType is ENABLED, but the plug-in only works in Internet Explorer. Interestingly, the font used on the plug-in's demo pages does render poorly when ClearType is enabled, but when it's disabled the two demo pages render identically/correctly.
例如，TypeKit 支持站点上的一个线程似乎指出了当 ClearType 被禁用时字体呈现问题。但是，开发了一个jQuery 插件来改善启用 ClearType 时的字体渲染，但该插件仅适用于 Internet Explorer。有趣的是，当启用 ClearType 时，插件演示页面上使用的字体渲染效果很差，但是当禁用它时，两个演示页面的渲染效果相同/正确。
So given all of that background information and prior research, my question is:
因此，鉴于所有这些背景信息和先前的研究，我的问题是：
What's the best way/compromise to ensure decent font rendering for modern browsers on all platforms, regardless of Windows ClearType settings?
无论 Windows ClearType 设置如何，确保在所有平台上为现代浏览器呈现体面字体的最佳方法/妥协是什么？
My first idea was to use stylesheets that include the @font-face fonts by default. JavaScript could detect the user's OS, and if Windows is detected, could programmatically modify stylesheet classes to use font-families that don't include the @font-face fonts so that system-native fallback fonts are used. I realized later that someone else also thought of this. It's a hacky and inelegant solution though. Ideally I want my web fonts to be usable regardless of the platform without relying on something like sIFR or Cufon.
我的第一个想法是使用默认包含@font-face 字体的样式表。JavaScript 可以检测用户的操作系统，如果检测到 Windows，则可以通过编程方式修改样式表类以使用不包含 @font-face 字体的字体系列，以便使用系统原生后备字体。后来我才知道，别人也想到了这个。不过，这是一个笨拙且不雅的解决方案。理想情况下，我希望我的网络字体无论平台如何都可以使用，而不依赖于诸如 sIFR 或 Cufon 之类的东西。
Does anyone have pointers or better ideas?
有没有人有指点或更好的想法？
采纳答案by Sliq
This is a big issue and is an official bug in Google Chrome since July 2012. In August 2013 this seems to be fixed in MOST cases. However there're still examples where fonts look edgy and pixelated.
这是一个大问题，并且是自 2012 年 7 月以来 Google Chrome 中的一个官方错误。在 2013 年 8 月，这似乎在大多数情况下得到了修复。然而，仍然有字体看起来前卫和像素化的例子。
Solution:
解决方案：
Give the element a decent text-stroke:
给元素一个像样的文本笔画：
// try around, find the setting that fits your font-size
webkit-text-stroke: 0.6px;
// alternative RGBa syntax, allows finer settings with alpha-transparency
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);
More info:
更多信息：
I've written a big blog article about this topic, including a lot of screenshots and 4 different solutions to fix the issue: Have a look here:
我写了一篇关于这个主题的大型博客文章，包括很多截图和 4 种不同的解决方案来解决这个问题：看看这里：
How to fix the ugly font rendering in Google Chrome
如何修复 Google Chrome 中丑陋的字体渲染
回答by tadywankenobi
Check out this article about pretty much the same thing:
查看这篇关于几乎相同内容的文章：
IE7 & 8 font smoothing: http://allcreatives.net/2009/12/05/smoother-font-face-embedding-in-ie-7-8/
IE7 & 8 字体平滑：http: //allcreatives.net/2009/12/05/smoother-font-face-embedding-in-ie-7-8/
There's a lot in the comments about it too. I've been looking for similar supports lately, without much joy. I had to use Cufon on one project cause the client wanted a very particular font. Sometimes, sIFR and Cufon are the only solutions, but honestly, I'd stay away from sIFR.
评论中也有很多关于它的内容。我最近一直在寻找类似的支持，但没有太多乐趣。我不得不在一个项目中使用 Cufon，因为客户想要一种非常特殊的字体。有时，sIFR 和 Cufon 是唯一的解决方案，但老实说，我会远离 sIFR。
Hope this helps.
希望这可以帮助。
回答by Yoav Weiss
A similar question here: Font-face embedded fonts look fuzzy in Windows 7 browsersgot an answer that solved the same issue for me.
这里有一个类似的问题：字体嵌入字体在 Windows 7 浏览器中看起来很模糊得到了一个答案，为我解决了同样的问题。
The fontsquirrel font generator http://www.fontsquirrel.com/fontface/generatoroptimizes fonts and adds them with hinting/rendering info that helps the windows font rendering engine render them better. It also generates smaller files, which will download faster.
fontsquirrel 字体生成器http://www.fontsquirrel.com/fontface/generator优化字体并添加提示/渲染信息，帮助 Windows 字体渲染引擎更好地渲染它们。它还生成较小的文件，下载速度会更快。
