是否有任何“字体平滑"?在谷歌浏览器中? [英] Is there any "font smoothing" in Google Chrome?
问题描述
我正在使用 google webfonts，它们在超大字体大小下很好，但在 18px 时，它们看起来很糟糕.我在这里和那里都读到过字体平滑的解决方案，但我没有找到任何可以清楚地解释它的地方，而且我发现的几个片段根本不起作用.
我的 h4 在几乎所有浏览器中看起来都很糟糕，但 Chrome 是最糟糕的.在 Chrome 中，我几乎所有的字体看起来都很糟糕.
谁能指出我正确的方向?也许您知道一个资源可以清楚地解释这一点?谢谢！
示例屏幕截图 #1
此屏幕截图显示了 针对将于 2014 年 7 月向公众发布的 Chrome 37 的此问题.请在此处查看当前稳定版 Chrome 35 和最新版 Chrome 37(早期开发预览版)的示例比较:
问题状态，2013 年 12 月
1.) 通过 @import、 或 Google 的 webfont 加载字体时，没有适当的解决方案.js.问题是 Chrome 只是从 Google 的 API 请求 .woff 文件，这些文件呈现得很糟糕.令人惊讶的是，所有其他字体文件类型都呈现出精美的效果.但是，有一些 CSS 技巧可以稍微平滑"渲染的字体，您会在此答案中找到更深入的解决方法.
2.) 当自托管字体时，有一个真正的解决方案，首先由 .如果有这方面的消息，我会发布消息.
我原来的回答:
这是 Google Chrome 中的一个大错误，Google Chrome 团队确实知道这一点，请参阅官方错误报告 此处.目前，在 2013 年 5 月，即使在报告错误 11 个月后，仍未解决.奇怪的是，唯一搞乱 Google Webfonts 的浏览器是 Google 自己的浏览器 Chrome(！).但是有一个简单的解决方法可以解决这个问题，请参阅下面的解决方案.
Google Chrome 开发团队的声明，2013 年 5 月
错误报告评论中的官方声明:
我们的 Windows 字体渲染正在积极进行中.......我们希望在一两个里程碑内有一些东西可以让开发人员开始玩.与往常一样，它进入稳定的速度有多快，这完全取决于我们能够以多快的速度根除和消除任何回归.
I'm using google webfonts and they fine at super large font sizes, but at 18px, they look awful. I've read here and there that there are solutions for font smoothing, but I haven't found any where that explains it clearly and the few snippets I have found don't work at all.
My h4 looks awful in pretty much every browser, but Chrome is the worst. In Chrome, pretty much all of my fonts look terrible.
Can anyone point me in the right direction? Perhaps you know of a resource that explains this clearly? Thanks!
EXAMPLE SCREENSHOT #1
This screenshot shows the homepage of https://www.dartlang.org/, a programming language that is made by Google (so we can imply that this website is also build by Google) and uses Google Webfonts.
Screenshot shows Google Chrome on the left, Firefox/Internet Explorer on the right.:
EXAMPLE SCREENSHOT #2
This screenshot shows a product info page on Adobe.com, using webfonts provided by Typekit. Adobe & Typekit are professionals when it comes to fonts.
Screenshot shows Google Chrome on the right, Firefox/Internet Explorer on the left:
Status of the issue, June 2014: Fixed with Chrome 37
Finally, the Chrome team will release a fix for this issue with Chrome 37 which will be released to public in July 2014. See example comparison of current stable Chrome 35 and latest Chrome 37 (early development preview) here:
Status of the issue, December 2013
1.) There is NO proper solution when loading fonts via @import, <link href= or Google's webfont.js. The problem is that Chrome simply requests .woff files from Google's API which render horribly. Surprisingly all other font file types render beautifully. However, there are some CSS tricks that will "smoothen" the rendered font a little bit, you'll find the workaround(s) deeper in this answer.
2.) There IS a real solution for this when self-hosting the fonts, first posted by Jaime Fernandez in another answer on this Stackoverflow page, which fixes this issue by loading web fonts in a special order. I would feel bad to simply copy his excellent answer, so please have a look there. There is also an (unproven) solution that recommends using only TTF/OTF fonts as they are now supported by nearly all browsers.
3.) The Google Chrome developer team works on that issue. As there have been several huge changes in the rendering engine there's obviously something in progress.
I've written a large blog post on that issue, feel free to have a look: How to fix the ugly font rendering in Google Chrome
Reproduceable examples
See how the example from the initial question look today, in Chrome 29:
POSITIVE EXAMPLE:
Left: Firefox 23, right: Chrome 29
POSITIVE EXAMPLE:
Top: Firefox 23, bottom: Chrome 29
NEGATIVE EXAMPLE: Chrome 30
NEGATIVE EXAMPLE: Chrome 29
Solution
Fixing the above screenshot with -webkit-text-stroke:
First row is default, second has:
-webkit-text-stroke: 0.3px;
Third row has:
-webkit-text-stroke: 0.6px;
So, the way to fix those fonts is simply giving them
-webkit-text-stroke: 0.Xpx;
or the RGBa syntax (by nezroy, found in the comments! Thanks!)
-webkit-text-stroke: 1px rgba(0,0,0,0.1)
There's also an outdated possibility: Give the text a simple (fake) shadow:
text-shadow: #fff 0px 1px 1px;
RGBa solution (found in Jasper Espejo's blog):
text-shadow: 0 0 1px rgba(51,51,51,0.2);
I made a blog post on this:
If you want to be updated on this issue, have a look on the according blog post: How to fix the ugly font rendering in Google Chrome. I'll post news if there're news on this.
My original answer:
This is a big bug in Google Chrome and the Google Chrome Team does know about this, see the official bug report here. Currently, in May 2013, even 11 months after the bug was reported, it's not solved. It's a strange thing that the only browser that messes up Google Webfonts is Google's own browser Chrome (!). But there's a simple workaround that will fix the problem, please see below for the solution.
STATEMENT FROM GOOGLE CHROME DEVELOPMENT TEAM, MAY 2013
Official statement in the bug report comments:
Our Windows font rendering is actively being worked on. ... We hope to have something within a milestone or two that developers can start playing with. How fast it goes to stable is, as always, all about how fast we can root out and burn down any regressions.
这篇关于是否有任何“字体平滑"?在谷歌浏览器中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
