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和Typekit在字体方面是专业人士.

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

Answer 1

问题的现状,2014年6月:使用Chrome 37修复

最后,Chrome团队将针对Chrome 37 发布针对此问题的修复程序,该修复程序将于2014年7月发布.请参阅此处的当前稳定Chrome 35和最新Chrome 37(早期开发预览)的示例对比:

该问题的现状,2013年12月

1)有否通过加载字体时,妥善的解决办法@import,<link href=或谷歌的webfont.js.问题是Chrome只是从Google的API 请求.woff文件,这些文件可怕地呈现.令人惊讶的是所有其他字体文件类型都呈现出精美 但是,有一些CSS技巧会使呈现的字体"平滑"一点点,你会在这个答案中找到更深入的解决方法.

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

3.)谷歌Chrome开发团队致力于解决该问题.由于渲染引擎发生了一些巨大的变化,显然正在进行中.

我已经写了一篇关于这个问题的大型博客文章,请随便看看: 如何在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);

我发了一篇博文:

如果您想要在此问题上进行更新,请查看相应的博客文章:如何修复Google Chrome中难看的字体呈现.如果有新闻,我会发布新闻.

我的原始答案:

这是谷歌Chrome中的一个大错误,谷歌Chrome团队确实知道这一点,请参阅此处的官方错误报告.目前,在2013年5月,甚至在报告错误后的11个月,它还没有解决.奇怪的是,搞砸谷歌Webfonts的唯一浏览器是谷歌自己的浏览器Chrome(!).但是有一个简单的解决方法可以解决问题,请参阅下面的解决方案.

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

臭虫报告中的官方声明评论:

我们的Windows字体渲染正在积极开展.......我们希望在开发人员可以开始玩的里程碑或者两个里程碑之内.一如既往,它对稳定的速度有多快,关乎我们能够多快地根除和消除任何回归.

Answer 2

我有同样的问题,我在山姆戈达德的这篇文章中找到了解决方案,

解决方案是否定义了对字体的调用两次.首先,建议将其用于所有浏览器,并且仅针对具有特殊媒体查询的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');
  }
}

使用此方法,字体将在所有浏览器中呈现良好.我发现唯一的负面因素是字体文件也会被下载两次.

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

Answer 3

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

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

你也可以使用subpixel-antialiased,这会给你不同类型的平滑(使文字有点模糊/阴影).但是,您需要每晚版本才能看到效果.您可以在此处了解有关字体平滑的更多信息.

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只是让文字看起来有点模糊.

其他有趣的事实:

-webkit-backface-visibility: hidden;在Chrome中转换文本时也会有效(-webkit-transform包含旋转,倾斜等属性)

没有 -webkit-backface-visibility: hidden;

同 -webkit-backface-visibility: hidden;

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