CSS Google Chrome 中是否有任何“字体平滑”功能?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11487427/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 04:29:11  来源:igfitidea点击:

Is there any "font smoothing" in Google Chrome?

cssgoogle-chromefontsgoogle-webfonts

提问by imakeitpretty

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.

我正在使用 google webfonts,它们在超大字体大小下很好,但在 18px 时,它们看起来很糟糕。我在这里和那里都读到过字体平滑的解决方案,但我没有找到任何可以清楚地解释它的地方,而且我发现的几个片段根本不起作用。

My h4looks awful in pretty much every browser, but Chrome is the worst. In Chrome, pretty much all of my fonts look terrible.

h4在几乎所有浏览器中看起来都很糟糕,但 Chrome 是最糟糕的。在 Chrome 中,我几乎所有的字体看起来都很糟糕。

Can anyone point me in the right direction? Perhaps you know of a resource that explains this clearly? Thanks!

任何人都可以指出我正确的方向吗?也许您知道一个资源可以清楚地解释这一点?谢谢!

EXAMPLE SCREENSHOT #1

示例屏幕截图 #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.

这个截图显示了https://www.dartlang.org/的主页,这是一种由谷歌制作的编程语言(所以我们可以暗示这个网站也是由谷歌构建的)并使用谷歌网络字体。

Screenshot shows Google Chrome on the left, Firefox/Internet Explorer on the right.:

屏幕截图显示左侧为 Google Chrome,右侧为 Firefox/Internet Explorer。:

google chrome on the left, firefox/internet explorer on the right

google chrome on the left, firefox/internet explorer on the right

EXAMPLE SCREENSHOT #2

示例屏幕截图 #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.

此屏幕截图显示了 Adob​​e.com 上的产品信息页面,使用 Typekit 提供的 webfonts。Adobe 和 Typekit 是字体方面的专业人士。

Screenshot shows Google Chrome on the right, Firefox/Internet Explorer on the left:

屏幕截图右侧显示 Google Chrome,左侧显示 Firefox/Internet Explorer:

google chrome on the left, firefox/internet explorer on the right

google chrome on the left, firefox/internet explorer on the right

回答by Sliq

Status of the issue, June 2014: Fixed with Chrome 37

问题状态,2014 年 6 月:已通过 Chrome 37 修复

Finally, the Chrome team will release a fixfor 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:

最后,Chrome 团队在 Chrome 37 中发布针对此问题的修复程序,该修复程序将于 2014 年 7 月向公众发布。请在此处查看当前稳定版 Chrome 35 和最新版 Chrome 37(早期开发预览版)的示例比较:

enter image description here

enter image description here

Status of the issue, December 2013

问题状态,2013 年 12 月

1.) There is NOproper solution when loading fonts via @import, <link href=or Google's webfont.js. The problem is that Chrome simply requests .wofffiles 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.

1)有妥善解决,通过加载字体时@import<link href=或谷歌的webfont.js。问题是 Chrome 只是从谷歌的 API请求.woff文件,这些文件呈现得很糟糕。令人惊讶的是,所有其他字体文件类型都呈现出精美的效果。但是,有一些 CSS 技巧可以稍微“平滑”渲染的字体,您会在此答案中找到更深入的解决方法。

2.) There IS a real solution for this when self-hosting the fonts, first posted by Jaime Fernandezin 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.

2.) 当自托管字体时,有一个真正的解决方案,首先由Jaime Fernandez在此 Stackoverflow 页面上的另一个答案中发布,它通过以特殊顺序加载 Web 字体来解决此问题。简单地复制他的优秀答案我会感到难过,所以请看看那里。还有一个(未经证实的)解决方案建议仅使用 TTF/OTF 字体,因为现在几乎所有浏览器都支持它们。

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.

3.) Google Chrome 开发人员团队致力于解决该问题。由于渲染引擎发生了一些巨大的变化,因此显然有一些进展。

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

我已经写了一篇关于这个问题的大型博客文章,请随意查看: 如何修复 Google Chrome 中丑陋的字体渲染

Reproduceable examples

可复制的例子

See how the example from the initial question look today, in Chrome 29:

看看今天最初问题中的例子在 Chrome 29 中的样子:

POSITIVE EXAMPLE:

正面例子:

Left: Firefox 23, right: Chrome 29

左:Firefox 23,右:Chrome 29

enter image description here

enter image description here

POSITIVE EXAMPLE:

正面例子:

Top: Firefox 23, bottom: Chrome 29

顶部:Firefox 23,底部:Chrome 29

enter image description here

enter image description here

NEGATIVE EXAMPLE: Chrome 30

负面示例:Chrome 30

enter image description here

enter image description here

NEGATIVE EXAMPLE: Chrome 29

负面示例:Chrome 29

enter image description here

enter image description here

Solution

解决方案

Fixing the above screenshot with -webkit-text-stroke:

使用 -webkit-text-stroke 修复上面的屏幕截图:

enter image description here

enter image description here

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!)

或 RGBa 语法(由 nezroy,在评论中找到!谢谢!)

-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):

RGBa 解决方案(在 Jasper Espejo 的博客中找到):

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.

如果您想在此问题上获得更新,请查看相应的博客文章:如何修复 Google Chrome 中的丑陋字体渲染。如果有这方面的消息,我会发布消息。

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.

这是 Google Chrome 中的一个大错误,Google Chrome 团队确实知道这一点,请在此处查看官方错误报告。目前,在 2013 年 5 月,即使在报告错误 11 个月后,仍未解决。奇怪的是,唯一搞乱 Google Webfonts 的浏览器是 Google 自己的浏览器 Chrome(!)。但是有一个简单的解决方法可以解决这个问题,请参阅下面的解决方案。

STATEMENT FROM GOOGLE CHROME DEVELOPMENT TEAM, MAY 2013

2013 年 5 月 GOOGLE CHROME 开发团队的声明

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.

我们的 Windows 字体渲染正在积极进行中。......我们希望在一两个里程碑内有一些东西可以让开发人员开始玩。与往常一样,它进入稳定的速度有多快,这完全取决于我们能够以多快的速度根除和消除任何回归。

回答by Jaime Fernandez

I had the same problem, and I found the solution in this post of Sam Goddard,

我遇到了同样的问题,我在Sam Goddard 的这篇文章中找到了解决方案,

The solution if to defined the call to the font twice. First as it is recommended, to be used for all the browsers, and after a particular call only for Chrome with a special media query:

解决方案是定义对字体的调用两次。首先是推荐的,用于所有浏览器,在特定调用后仅用于具有特殊媒体查询的 Chrome:

@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;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
  }
}

enter image description here

enter image description here

With this method the font will render good in all browsers. The only negative point that I found is that the font file is also downloaded twice.

使用这种方法,字体将在所有浏览器中呈现良好的效果。我发现的唯一缺点是字体文件也下载了两次。

You can find an spanish version of this article in my page

您可以在我的页面中找到这篇文章西班牙语版本

回答by Kushagra

Chrome doesn't render the fonts like Firefox or any other browser does. This is generally a problem in Chrome running on Windows only. If you want to make the fonts smooth, use the -webkit-font-smoothingproperty on yer h4tags like this.

Chrome 不会像 Firefox 或任何其他浏览器那样呈现字体。这通常是仅在 Windows 上运行的 Chrome 中的问题。如果要使字体平滑,请像这样使用-webkit-font-smoothingyerh4标签上的属性。

h4 {
    -webkit-font-smoothing: antialiased;
}

You can also use subpixel-antialiased, this will give you different type of smoothing (making the text a little blurry/shadowed). However, you will need a nightly version to see the effects. You can learn more about font smoothing here.

您也可以使用subpixel-antialiased,这将为您提供不同类型的平滑(使文本有点模糊/阴影)。但是,您需要一个夜间版本才能看到效果。您可以在此处了解有关字体平滑的更多信息。

回答by Rishabh Gupta

Ok you can use this simply

好的,您可以简单地使用它

-webkit-text-stroke-width: .7px;
-webkit-text-stroke-color: #34343b;
-webkit-font-smoothing:antialiased;

Make sure your text color and upper text-stroke-width must me same and that's it.

确保您的文本颜色和上文本笔划宽度必须与我相同,仅此而已。

回答by Yavierre

I will say before all that this will not always works, i have tested this with sans-seriffont and external fonts like open sans

我首先要说这并不总是有效,我已经用sans-serif字体和外部字体测试过这个open sans

Sometimes, when you use huge fonts, try to approximate to font-size:49pxand upper

有时,当您使用大字体时,尝试近似于font-size:49px和上

font-size:48px

font-size:48px

This is a header text with a size of 48px (font-size:48px;in the element that contains the text).

这是一个大小为 48px 的标题文本(font-size:48px;在包含文本的元素中)。

But, if you up the 48px to font-size:49px;(and 50px, 60px, 80px, etc...), something interesting happens

但是,如果您将 48px 提高到font-size:49px;(以及 50px、60px、80px 等...),就会发生一些有趣的事情

font-size:49px

font-size:49px

The text automatically get smooth, and seems really good

文字自动变得平滑,看起来真的很好

For another side...

对于另一边...

If you are looking for small fonts, you can try this, but isn't very effective.

如果你正在寻找小字体,你可以试试这个,但不是很有效。

To the parent of the text, just apply the next css property: -webkit-backface-visibility: hidden;

对于文本的父级,只需应用下一个 css 属性: -webkit-backface-visibility: hidden;

You can transform something like this:

你可以这样转换:

-webkit-backface-visibility: visible;

-webkit-backface-visibility: visible;

To this:

对此:

-webkit-backface-visibility: hidden;

-webkit-backface-visibility: hidden;

(the font is Kreon)

(字体是Kreon

Consider that when you are not putting that property, -webkit-backface-visibility: visible;is inherit

考虑到当您不放置该属性时,-webkit-backface-visibility: visible;是继承

But be careful, that practice will not give always good results, if you see carefully, Chrome just make the text look a little bit blurry.

要小心,这种做法并不总是会有好的结果,如果你仔细看,Chrome 只会让文字看起来有点模糊。

Another interesting fact:

另一个有趣的事实:

-webkit-backface-visibility: hidden;will works too when you transform a text in Chrome (with the -webkit-transformproperty, that includes rotations, skews, etc)

-webkit-backface-visibility: hidden;当您在 Chrome 中转换文本时也会起作用(使用-webkit-transform属性,包括旋转、倾斜等)

Without

Without

Without -webkit-backface-visibility: hidden;

没有 -webkit-backface-visibility: hidden;

With

With

With -webkit-backface-visibility: hidden;

-webkit-backface-visibility: hidden;

Well, I don't know why that practices works, but it does for me.Sorry for my weird english.

好吧,我不知道为什么这种做法有效,但它对我有用。对不起我奇怪的英语。