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

我正在使用谷歌网页字体,他们罚款超大字号,但在18px,他们看起来很糟糕。 我已经在这里和那里看到,有字体平滑的解决scheme,但我没有find任何解释清楚的地方,我发现的几个片段根本不工作。

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

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

示例屏幕#1

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

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

在左边的谷歌浏览器,右侧的Firefox / Internet Explorer

示例屏幕#2

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

屏幕截图显示了右侧的Google Chrome浏览器,左侧是Firefox / Internet Explorer:

谷歌浏览器在左侧,右侧的Firefox / Internet Explorer

5 Solutions collect form web for “Google Chrome中是否有“字体平滑”?”

问题的状态,2014年6月:修复了Chrome 37

最后,Chrome小组将会发布一个针对此问题的修复程序 ,Chrome 37将于2014年7月发布。请参阅当前稳定版Chrome 35和最新Chrome 37(早期开发预览版)的示例比较:

在这里输入图像描述

问题的现状,2013年12月

1.)通过@import<link href=或者google的webfont.js加载字体时没有合适的解决scheme。 问题在于,Chrome只是简单地请求来自Google API的.woff文件。 令人惊讶的是所有其他的字体文件types渲染漂亮。 但是,有一些CSS技巧会使渲染的字体“平滑”一些,你会在这个答案中find更深层的解决方法。

2.)有一个真正的解决scheme,当自承载的字体,由Jaime费尔南德斯在这个Stackoverflow页面的另一个答案,通过加载Web字体以特殊的顺序修复了这个问题。 我只想复制他的优秀答案感觉不好,所以请在那里看看。 还有一个(未经validation的)解决scheme,build议只使用TTF / OTF字体,因为几乎所有的浏览器都支持这种字体。

3.)Google Chrome开发者团队正在处理这个问题。 由于渲染引擎有几个巨大的变化,显然有一些进展。

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

可重现的例子

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

正面的例子:

左:Firefox 23,右:Chrome 29

在这里输入图像描述

正面的例子:

顶部:Firefox 23,底部:Chrome 29

在这里输入图像描述

负例:铬30

在这里输入图像描述

负例:铬29

在这里输入图像描述

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

在这里输入图像描述

第一行是默认的,第二行有:

 -webkit-text-stroke: 0.3px; 

第三排有:

 -webkit-text-stroke: 0.6px; 

所以,修复这些字体的方法就是简单的给他们

 -webkit-text-stroke: 0.Xpx; 

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

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

还有一个过时的可能性 :给文本一个简单的(假的)阴影:

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

RGBa解决scheme(可在Jasper Espejo的博客中find):

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

我做了一个博客文章:

如果你想在这个问题上进行更新,请查看相应的博客文章: 如何修复谷歌浏览器中丑陋的字体渲染 。 如果有消息,我会发布消息。

我原来的答案是:

这是谷歌浏览器中的一个大错误,谷歌浏览器小组确实知道这一点,请看这里的官方错误报告。 目前,在2013年5月,即使在报告错误11个月之后,也没有解决。 这是一个奇怪的事情,唯一的浏览器,谷歌Webfonts搞砸是谷歌自己的浏览器Chrome(!)。 但是有一个简单的解决方法可以解决问题,请参阅下面的解决scheme。

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

在bug报告中的官方声明评论:

我们的Windows字体渲染正在积极进行中。 …我们希望在开发者可以开始玩的一个或两个里程碑内有一些东西。 一如既往地,稳定的速度有多快,我们可以根除和消除任何回归。

我也有同样的问题,我在Sam Goddard这个职位上find了解决办法,

解决scheme是如何定义对字体的调用两次 。 首先,build议使用所有的浏览器,并且在特定的媒体查询之后仅针对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'); } } 

在这里输入图像描述

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

您可以在我的页面中find这篇文章的西class牙文版本

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

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

你也可以使用亚subpixel-antialiased ,这会给你不同types的平滑(使文本有点模糊/阴影)。 但是,您将需要夜间版本来查看效果。 您可以在这里了解更多关于字体平滑的信息 。

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

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

确保你的文本颜色和上面的文本笔画宽度必须相同,就是这样。

我会说,在之前, 这不会总是有效的 ,我已经testing这与sans-serif字体和外部字体,如open sans

有时,当你使用巨大的字体,尝试接近font-size:49px和上

字体大小:48像素

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

但是,如果你把48px改为font-size:49px; (和50px,60px,80px等),会发生一些有趣的事情

字体大小:49px

文本自动变得平滑,看起来非常好

另一面…

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

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

你可以改变这样的东西:

-webkit-backface-visibility:visible;

对此:

-webkit-backface-visibility:hidden;

(字体是Kreon

考虑到当你不把这个属性, -webkit-backface-visibility: visible; 是inheritance

要小心 ,这种做法不会给出总是好的结果,如果你仔细看,铬只是使文本看起来有点模糊。

另一个有趣的事实

-webkit-backface-visibility: hidden; 当你在Chrome中转换文本(使用-webkit-transform属性,包括旋转,倾斜等)

没有

没有-webkit-backface-visibility: hidden;

同

使用-webkit-backface-visibility: hidden;

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

  • 如何展开div高度来填充父div - CSS
  • 柔性容器中的文本不包装在IE11中
  • 如何增加虚线边框点之间的空间
  • 带有Respond.js的Modernizr
  • 用CSS设置背景图像的大小?
  • 如何设置表格的最大高度?
  • 移动浏览器中的CSS3 100vh不恒定
  • 如何用CSS更改滚动条位置?
  • Firefox和Opera中的Webfont平滑和抗锯齿
  • 黑色透明覆盖图像hover只有CSS?
  • CSS3转换 - 淡出效果