谷歌浏览器中是否有“字体平滑”功能？

Question

谷歌浏览器中是否有“字体平滑”功能？

cssgoogle-chromefontsgoogle-webfonts

142

我正在使用谷歌Web字体，在超大的字号下表现良好，但在18像素下看起来很糟糕。我已经在这里和那里读到有关字体平滑处理的解决方案，但我没有找到任何清晰地解释它的地方，而且我找到的几个代码片段根本无效。

我的 h4 标题在几乎所有浏览器中都很糟糕，但在 Chrome 中最糟糕。在 Chrome 中，我的字体几乎全部看起来很糟糕。

能否有人指点我正确的方向？也许您知道一个清晰解释此问题的资源？谢谢！

示例屏幕截图 #1

此屏幕快照显示了 https://www.dartlang.org/ 的主页，这是由 Google 制作的一种编程语言（因此我们可以推断出此网站也是由 Google 构建），并使用了 Google Web 字体。

屏幕截图显示左侧为 Google Chrome，右侧为 Firefox/Internet Explorer：

左侧为 Google Chrome，右侧为 Firefox/Internet Explorer

示例屏幕截图 #2

此屏幕快照显示了 Adobe.com 上的产品信息页面，使用了由 Typekit 提供的 Web 字体。Adobe 和 Typekit 在处理字体方面都是专业人士。

屏幕截图显示左侧为 Firefox/Internet Explorer，右侧为 Google Chrome：

左侧为 Firefox/Internet Explorer，右侧为 Google Chrome

- imakeitpretty

它们在Chrome和Firefox中看起来很好...你能添加一个截图吗？ - JFK

在iPhone/iOS上它们看起来非常好。 - insertusernamehere

你正在使用Windows吗？如果是这样，操作系统的ClearType平滑引擎可能是原因。我已经在Mac OS、Ubuntu、Fedora和Chrome OS以及Windows上尝试过该页面；只有后者由于我怀疑的ClearType引擎而无法正确呈现。 - Jules

是的，这是Windows系统。你知道我能做些什么吗？ - imakeitpretty

刚刚发现了这个有用的功能：chrome://flags/#lcd-text-aa - 启用它，可以使文本更加平滑。 - cinek

4个回答

46

我曾经遇到同样的问题，后来在Sam Goddard的这篇文章中找到了解决方法。

解决方法是将字体调用定义两次。首先按照推荐方式定义一次，用于所有浏览器，然后再使用特殊的媒体查询，在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');
  }
}

输入图像描述

使用这种方法，字体在所有浏览器中都可以很好地呈现。我发现唯一的负面点是字体文件也被下载了两次。

你可以在我的页面上找到此文章的西班牙语版本

- Jaime Fernandez

6

这实际上是正确的答案，但可以简化一下。只需将SVG版本首先列在字体列表中即可解决问题！ - jduncanator

2

这个答案提供了迄今为止最好的结果。SVG字体比-webkit-text-stroke hack好看100倍。主要缺点是SVG版本的字体大小通常要大得多 :-( Google真的需要尽快解决这个问题。 - Timidfriendly

我完全同意！我会从我的答案中链接到这个答案。 - Sliq

@jduncanator 首先列出SVG并不明智 - 这意味着支持它的每个浏览器都将加载SVG字体，而您只需要在Windows上的Chrome中使用它。 - RoelN

@jduncanator 两个主要的罪魁祸首是没有提示支持和大文件大小（许多服务器默认情况下未启用字体的gzip压缩）。 - RoelN

Chrome 38起，Chrome不再支持SVG字体。 - Abdi

22

Chrome在渲染字体方面与Firefox或其他浏览器不同。这个问题通常只会在Windows上运行的Chrome中出现。如果你想要让字体更加平滑，可以在你的h4标签上使用 -webkit-font-smoothing属性。

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

你也可以使用subpixel-antialiased，这将为你提供不同类型的平滑效果（使文本略微模糊/带阴影）。但是，你需要一个夜间版本才能看到效果。你可以在这里了解更多关于字体平滑的知识。

- Kushagra

11

我今天（2013年2月8日）使用的是最新版本的Chrome浏览器，但是在这个页面上并没有发现任何区别：http://maxvoltar.com/sandbox/fontsmoothing/。 - thednp

5

这个在Windows上无法运行（已经测试过）。由于Mac系统默认会执行这个操作，我将其标记为降低使用它的人数。 - KryptoniteDove

4

无效。我刚在Windows 8上尝试了一下，使用的是截至2013年10月8日最新版本的Chrome浏览器。 - jay_t55

3

在Mac上的Chrome和Safari浏览器中，这是有效的，因此值得添加。甚至Apple.com在其base.css样式表中使用它：

body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }

- Justin

@Justin 他们似乎也使用 Helvetica、Arial 和 Verdana 这些西文字体，而不是无衬线字体，在给定的平台上可以展现得最好。 - Tracker1

1

火狐浏览器的等效写法是 -moz-osx-font-smoothing: grayscale; - Jeff Walters

14

好的，你可以简单地使用这个。

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

确保文本颜色和上部文本描边宽度相同，就这样。

- Rishabh Gupta

字体平滑不再起作用，但文本描边有效，并且可以在某些字体上有所帮助。我似乎使用0.5像素的描边和rgba（0,0,0,0.5）获得了最佳效果。 - Moss

Firefox的等效属性是-moz-osx-font-smoothing: grayscale; - Jeff Walters

这很不错...只需用inherit替换#34343b即可.. ;) - Sagive

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sliq · Accepted Answer

问题状态，2014年6月：Chrome 37版本已修复

最终，Chrome团队将发布一个修复程序来解决这个问题，该修复程序将在2014年7月发布给公众。在此处可以看到当前稳定版Chrome 35和最新的Chrome 37（早期开发预览版）的比较示例：

enter image description here

问题状态，2013年12月

1.) 当通过@import、<link href=或Google的webfont.js加载字体时，没有适当的解决方案。问题是Chrome只从Google的API请求.woff文件，这些文件呈现效果很差。令人惊讶的是，所有其他字体文件类型都呈现出色。然而，有一些CSS技巧可以稍微“平滑”渲染字体，您将在本答案的更深处找到解决方法。

2.) 当自行托管字体时，确实有一个真正的解决方案，由Jaime Fernandez在此Stackoverflow页面的另一个答案中首次发布，通过特定顺序加载Web字体来修复此问题。我不想简单地复制他的优秀答案，所以请看那里。也有一个（未经证明的）解决方案建议仅使用TTF / OTF字体，因为它们现在被几乎所有浏览器支持。

3.) 谷歌Chrome开发团队正在处理这个问题。由于渲染引擎已经进行了几次重大更改，显然有一些进展。

我已经在这个问题上写了一篇很长的博客文章，随时可以查看: 如何修复Google Chrome中的丑陋字体渲染

可重现的例子

看看最初问题的例子在Chrome 29中的表现：

正面的例子：

左侧：Firefox 23，右侧：Chrome 29

enter image description here

正面例子：

上：Firefox 23，下：Chrome 29

enter image description here

负面示例：Chrome 30

enter image description here

负面示例：Chrome 29

enter image description here

解决方案

使用 -webkit-text-stroke 修复上面的截图：

enter image description here

第一行是默认的，第二行有：

-webkit-text-stroke: 0.3px;

第三行有：

-webkit-text-stroke: 0.6px;

所以，修复这些字体的方法就是简单地给它们设置。

-webkit-text-stroke: 0.Xpx;

或者使用RGBa语法（由nezroy提供，发现在评论中！谢谢！）

-webkit-text-stroke: 1px rgba(0,0,0,0.1)

还有一种过时的可能性：给文本添加一个简单（虚假的）阴影：

text-shadow: #fff 0px 1px 1px;

RGBa解决方案（来自Jasper Espejo的博客）：

text-shadow: 0 0 1px rgba(51,51,51,0.2);

我在博客上发表了一篇文章：

如果你想了解这个问题的最新情况，请查看相应的博客文章：如何修复Google Chrome中丑陋的字体渲染。如果有任何进展，我会发布消息。

我的原始答案：

这是Google Chrome中的一个大bug，Google Chrome团队已经知道此事，请参见官方错误报告此处。目前，在2013年5月，即使在报告错误后11个月，该问题仍未得到解决。奇怪的是，唯一会乱搞Google Webfonts的浏览器是谷歌自己的Chrome浏览器！但是，有一个简单的解决方法可以解决问题，请参见下面的解决方案。

来自Google Chrome开发团队的声明，2013年5月

官方声明在错误报告评论中：

我们正在积极研究Windows字体渲染。……我们希望在一个或两个里程碑内推出一些开发者可以开始使用的东西。它稳定的速度，始终取决于我们能够多快地消除和清除任何回归问题。