使CSS3 @ font-face字体渲染在Windows上使用ClearType很好 [英] Making CSS3 @font-face font rendering play nice with ClearType on Windows
问题描述
首先是一些背景信息。
似乎使用CSS3 @ font-face规则可以在任何浏览器中使用ClearType字体renderingv以意想不到的方式进行交互任何版本的Windows（XP及以上版本）。
我首次将此文档记录为 Google字体目录bug 。进一步的研究似乎产生相互矛盾的信息;启用或禁用ClearType可以帮助或伤害@ font-face字体在Windows中的任何Web浏览器中呈现。 ClearType是否帮助或伤害似乎完全取决于所使用的字体，以及它们内置的是什么样的提示。
例如，在TypeKit的支持网站上的线程似乎指向ClearType为DISABLED时的字体呈现问题。但是，开发了 jQuery插件来改进当ClearType为ENABLED时，字体呈现，但插件仅在Internet Explorer中工作。有趣的是，当启用ClearType时，插件演示页面上使用的字体显示效果不佳，但是当它被禁用时，两个演示页面的呈现方式相同/正确。
所有的背景信息和以前的研究，我的问题是：
什么是最好的方式/妥协，以确保适当的字体渲染的现代浏览器在所有平台上，无论Windows ClearType设置？
我的第一个想法是使用默认包含@ font-face字体的样式表。 JavaScript可以检测用户的操作系统，如果检测到Windows，可以编程方式修改样式表类，以使用不包括@ font-face字体的字体族，以便使用系统本地回退字体。我后来意识到，有人还想到此 。这是一个hacky和不起眼的解决方案。理想情况下，我希望我的网络字体可用于任何平台，而不依赖于像sIFR或Cufon之类的东西。
有人有指针或更好的想法吗？
这是一个大问题，是Google Chrome自2012年7月以来的一个官方错误。2013年8月，这似乎在MOST案例中已修复。但
text-stroke： //尝试一下，找到符合你的font-size的设置
webkit-text- stroke：0.6px;
//替代RGBa语法，允许使用alpha透明度更精细的设置
-webkit-text-stroke：1px rgba（0，0，0，0.1）
更多信息：
写一篇关于这个主题的大博客文章，包括大量的截图和4个不同的解决方案来解决这个问题：看看这里：
如何修复Google Chrome中的丑陋字体渲染
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.)
I first documented this as a Google Font Directory bug when 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.
For example, a thread on TypeKit's support site seems to point to font rendering problems when ClearType is DISABLED. However, a jQuery plug-in was 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.
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?
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.
Does anyone have pointers or better ideas?
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.
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:
How to fix the ugly font rendering in Google Chrome
这篇关于使CSS3 @ font-face字体渲染在Windows上使用ClearType很好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
