谷歌浏览器中是不是有任何“字体平滑”？

Posted 2023-02-19

【中文标题】谷歌浏览器中是不是有任何“字体平滑”？

【英文标题】：Is there any "font smoothing" in Google Chrome?谷歌浏览器中是否有任何“字体平滑”？

【发布时间】：2012-07-14 07:18:06

【问题描述】：

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

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

谁能指出我正确的方向？也许您知道可以清楚地解释这一点的资源？谢谢！

示例屏幕截图 #1

此屏幕截图显示了https://www.dartlang.org/ 的主页，这是一种由 Google 制作的编程语言（因此我们可以暗示该网站也是由 Google 构建的）并使用 Google Webfonts。

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

示例屏幕截图 #2

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

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

【问题讨论】：

它们在 chrome 和 firefox 中对我来说看起来不错......你能添加一个打印屏幕吗？

在 iPhone/ios 上它们看起来也很不错。

您使用的是 Windows 吗？如果是这样，操作系统的 ClearType 平滑引擎可能是原因。除了 Windows，我还在 Mac OS、Ubuntu、Fedora 和 Chrome OS 中尝试过该页面；后者是唯一一个不能正确渲染的，因为我怀疑是 ClearType 引擎。

是的，它是窗户。你知道我能做些什么吗？

刚刚发现了这个有用的功能：chrome://flags/#lcd-text-aa - 启用它，它会为您平滑文本

【参考方案1】：

问题状态，2014 年 6 月：已在 Chrome 37 中修复

最后，Chrome 团队 will release a fix 解决了 Chrome 37 的这一问题，该问题将于 2014 年 7 月向公众发布。请在此处查看当前稳定的 Chrome 35 和最新的 Chrome 37（早期开发预览）的示例比较：

问题状态，2013 年 12 月

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

2.) 自托管字体时有一个真正的解决方案，首先由 Jaime Fernandez 在此 *** 页面上的另一个答案中发布，通过在其中加载网络字体来解决此问题一个特殊的命令。简单地复制他的出色答案我会感觉很糟糕，所以请在那里看看。还有一个（未经证实的）解决方案建议仅使用 TTF/OTF 字体，因为它们现在几乎所有浏览器都支持。

3.) Google Chrome 开发人员团队致力于解决该问题。由于渲染引擎已经发生了几处巨大的变化，因此显然有些事情正在进行中。

我已经写了一篇关于这个问题的大型博客文章，请随意看看： How to fix the ugly font rendering in Google Chrome

可重现的例子

查看最初问题中的示例在 Chrome 29 中的外观：

正面例子：

左：Firefox 23，右：Chrome 29

正面例子：

顶部：Firefox 23，底部：Chrome 29

反例：Chrome 30

反例：Chrome 29

解决方案

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

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

-webkit-text-stroke: 0.3px;

第三行有：

-webkit-text-stroke: 0.6px;

所以，修复这些字体的方法就是给它们

-webkit-text-stroke: 0.Xpx;

或 RGBa 语法（由 nezroy 提供，在 cmets 中找到！谢谢！）

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

我为此发表了一篇博文：

如果您想了解此问题的最新信息，请查看相应的博客文章：How to fix the ugly font rendering in Google Chrome。如果有这方面的消息，我会发布消息。

我原来的回答：

这是 Google Chrome 中的一个大错误，Google Chrome 团队确实知道这一点，请参阅官方错误报告 here。目前，在 2013 年 5 月，即使在报告该错误 11 个月后，也没有解决。奇怪的是，唯一搞乱 Google Webfonts 的浏览器是 Google 自己的浏览器 Chrome（！）。但是有一个简单的解决方法可以解决问题，请参阅下面的解决方案。

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

错误报告cmets官方声明：

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

【讨论】：

问题不在于所有在 Windows 上运行的浏览器，它只是在 Chrome 的情况下。 Firefox、Opera 和 IE 具有适当的字体抗锯齿功能。虽然，它可以通过使用 -webkit-font-smoothing 属性在 chrome 中修复。请参阅下面的答案。

对于黑色文本，我使用了text-shadow: #333 0px 0px 1px;。非常感谢您的提示。

也许它在翻译中丢失了，但 -webkit-text-stroke 仅在您使用字体颜色的 alpha 时才有效。所以对于黑色字体，我使用类似“-webkit-text-stroke: 1px rgba(0,0,0,0.1)”的东西。

我注意到 Mac 上的 Chrome 30 现在表现出同样缺乏抗锯齿功能。

在这个问题的 chrome 板上的官方票 code.google.com/p/chromium/issues/detail?id=137692 它似乎旨在修复 v37，如果我正确地理解了线程中的最后一个帖子。

【参考方案2】：

我也遇到了同样的问题，在this post of 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');
  

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

您可以找到spanish version of this article in my page

【讨论】：

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

这个答案给出了——到目前为止——最好的结果。 SVG 字体看起来比 -webkit-text-stroke hack 好 100 倍。主要缺点是 SVG 版本的字体大小；它通常要大得多:-(谷歌真的需要把这个排序 a.s.a.p.

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

@jduncanator 首先列出 SVG 是不可取的 - 这意味着 SVG 字体将由支持它的每个浏览器 加载，而您只需要它用于 Windows 上的 Chrome .

@jduncanator 两个主要的罪魁祸首是不支持提示和大文件（许多服务器默认不启用字体的 gzip 压缩）。

【参考方案3】：

Chrome 不会像 Firefox 或任何其他浏览器那样呈现字体。这通常是仅在 Windows 上运行的 Chrome 中的问题。如果你想让字体平滑，可以像这样在你的h4 标签上使用-webkit-font-smoothing 属性。

h4 
    -webkit-font-smoothing: antialiased;

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

【讨论】：

我今天 8-feb-2013 有最新版本的 Chrome，这里的这个页面显示它们之间没有区别 maxvoltar.com/sandbox/fontsmoothing

这不起作用（在 Windows 上测试）。由于 mac 无论如何都会这样做，所以我标记为劝阻人们不要使用它。

这不起作用。我刚刚在 Windows 8 上尝试过。无论最新版本的 Chrome 是什么（截至 2013 年 10 月 8 日）。

在 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;

firefox 等价物是 -moz-osx-font-smoothing: grayscale;

【参考方案4】：

好的，你可以简单地使用它

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

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

【讨论】：

字体平滑不再做任何事情，但文本笔划有效并且可以帮助某些字体。我似乎用 0.5px 的笔划和 rgba(0,0,0,0.5) 得到了最好的结果。

firefox 等价物是 -moz-osx-font-smoothing: grayscale;

这很好...只需将#34343b 替换为inherit.. ;)