Google Chrome中是否有“字体平滑”？

Question

我正在使用google webfonts，它们的超大字体尺寸很好，但是在18px时，它们看起来很糟糕。我已经在这里阅读过那里有字体平滑的解决方案，但是我没有找到任何明确解释它的地方，而且我发现的几个片段根本不起作用。

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

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

示例SCREENSHOT＃1

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

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

示例SCREENSHOT＃2

此屏幕截图显示了Adobe.com上的产品信息页面，使用了Typekit提供的webfonts。 Adobe＆amp; Typekit是字体方面的专业人士。

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

Answer 1

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

最后，针对此问题的Chrome团队will release a fix将于2014年7月向公众发布。请参阅此处的当前稳定Chrome 35和最新Chrome 37（早期开发预览）的示例比较：

问题状况，2013年12月

1。）通过@import，<link href=或Google webfont.js加载字体时，有 NO 正确的解决方案。问题是Chrome只是从Google的API中请求 .woff 文件，这些文件可怕地呈现。令人惊讶的是所有其他字体文件类型都呈现出精美但是，有一些CSS技巧将会“平滑”＃34;渲染的字体有点，你会在这个答案中找到更深入的解决方法。

2。）在这个Stackoverflow页面的另一个答案中首次由 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，在评论中找到！谢谢！）

-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中的一个大错误，谷歌Chrome团队确实知道这一点，请参阅官方错误报告here。目前，在2013年5月，甚至在报告错误后的11个月，它还没有解决。奇怪的是，搞砸谷歌Webfonts的唯一浏览器是谷歌自己的浏览器Chrome（！）。但是有一个简单的解决方法可以解决问题，请参阅下面的解决方案。

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

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

我们的Windows字体呈现正在积极开展。 ...我们希望在开发人员可以开始玩的里程碑或者两个里程碑之内。一如既往，它对稳定的速度有多快，因为我们可以快速根除并消除任何回归。

Answer 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

Answer 3

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

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

你也可以使用subpixel-antialiased，这会给你不同类型的平滑（使文字有点模糊/阴影）。但是，您需要每晚版本才能看到效果。您可以详细了解字体平滑here。

Answer 4

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

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

确保你的文字颜色和上部文字笔画宽度必须相同，就是这样。

Answer 5

我会先说这不会一直有用，我用sans-serif字体和外部字体open sans

进行了测试

有时，当您使用大字体时，请尝试近似为font-size:49px和更高

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

但是，如果你将48px提高到font-size:49px;（以及50px，60px，80px等等），那么会发生一些有趣的事情

文字自动变得流畅，看起来非常好

另一方......

如果您正在寻找小字体，可以试试这个，但效果不是很好。

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

你可以改变这样的事情：

对此：

（字体为Kreon）

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

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

另一个有趣的事实：

在Chrome中转换文本时，

-webkit-backface-visibility: hidden;也会有效（-webkit-transform属性，包括旋转，倾斜等）

没有-webkit-backface-visibility: hidden;

使用-webkit-backface-visibility: hidden;

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