字体平滑技术? Chrome 14.0.833.0或更高版本中的文本阴影渲染有所不同

编辑:

我们现在在Chrome 19上,这个问题还没有解决。 只是澄清:这发生在Windows上的Chrome,而不是Linux或Mac。 我认为这与Cleartype有关。 谷歌,请解决这个问题。

我一直在使用CSS3的text-shadow模拟IE9的其他浏览器的平滑字体。 基本上我只是将容器文本的文本阴影设置为容器的背景。 您可以通过在比Chrome 14.0.833更低的任何字体上对较大的字体元素设置text-shadow来查看该行为。 文字看起来很平滑。 删除文字阴影和字体看起来锯齿状。 但是,在Chrome 14.0.833(更新:出现它也在14.0.834“破碎”),这不再起作用。 文本 – 阴影属性仍然有效,但不像以前那样。 你可以看到这里的行为(只是装载了不同的Chrome版本)看起来好像在较旧的Chromes中,文本阴影在文本内部开始一点点,然后展开 – 这也许是为什么文本阴影黑客工作。 在较新的Chrome浏览器中,文本阴影似乎在文本之外启动,这就是为什么它不起作用。 看看我的意思。

我的问题基本上这是一个错误? 哪一个是预期的行为? 是否有任何其他字体平滑变通办法我可以使用?

W3C的规范似乎没有说明预期的行为是什么,虽然我确实看到,也许我应该使用文本大纲(这是有点不受支持,这打破了目的)

Solutions Collecting From Web of "字体平滑技术? Chrome 14.0.833.0或更高版本中的文本阴影渲染有所不同"

好吧,我已经花了相当多的时间,这是它的结果:这是一个错误。

首先, -webkit-font-smoothing:antialiased; 只适用于Mac,不适用于Windows。

我在Windows7上创建了一个分层的Pixlr图像,其中包含一个JSfiddle的屏幕截图,其中包含4个不同的元素,每个元素使用不同的文本阴影。 自Chrome13和Chrome 14.0.835以来,您可以清楚地看到文字阴影已经改变。 我不得不在Beta和Dev频道之间切换几次,因为我搞砸了,卸载等等。

下载我制作的分层Pixlr图像文件:

http://dl.dropbox.com/u/7353877/Chrome-text-shadow-v13-v14_0_835.pxd

然后去http://pixlr.com/editor/并选择从电脑打开文件,打开文件。 现在在Pixlr中,放大四行文本,在顶层的图层面板中点击复选框并取消选中它,然后再次检查,重复执行,看看文字阴影的变化有多剧烈。

这应该作为一个错误提交。 回到这个页面的链接可以用来显示效果,如果需要的话。

JSfiddle(JSfiddle我用的截图) http://jsfiddle.net/nicktheandroid/Xkp9q/

一个半小时前我在微波炉里放了一块馅饼….这是冷的:(

好吧,我已经弄明白了,呃。 讨厌自从我设置了一个赏金,但无论如何。 我相当肯定,这不是一个错误,它是预期的行为 – 特别是因为我们已经看到了一些Chrome的迭代,并保持不变。 一些不同的方法工作。 我写了一些我的博客,你可以在这里看到完整的文章,但这是它的大部分:

首先,我尝试了-webkit-text-stroke:1px #000其中#000是文本的颜色。 但是,这种风格是为了使用文本的颜色不同于笔画,为了一个很好的文字轮廓。 当两者都是相同的颜色,它看起来…奇怪。 我不知道为什么; 我不是字体渲染专家。 您可以在文章后面看到图片中的行为。

接下来我尝试了一个简单的text-shadow:#000 0 0 1px其中#000与文字颜色相同。 由于相同的Chrome 14.0.833+的问题,这仍然使字体看起来有些锯齿。 但是,这比纯文本更好。

接下来我尝试了上面的两个尝试。 这看起来好一点点,但它会使文本变大,因为它实际上增加了2个像素来思考文本。

最后,我试着应用两个文字阴影: text-shadow:#000 0 1px 1px,#000 0 -1px 1px >>其中#000是文字的颜色。 这样做是应用两个文字阴影,其中一个被推下来,另一个推高。 这样,文本阴影覆盖锯齿状的边缘。 它使文本变得有点沉重,但是一定能使它平滑下来。

根据您的文本的大小,不同的方法工作。 较小的(但仍然锯齿状的)文本可以使用文本阴影,较大的文本可以使用阴影/笔触方法,而非常大的文本可以使用双阴影方法。 当然,文字越大,越多的像素变得越不明显。 你可以在这里看到所有不同的方法

 -webkit-font-smoothing:antialiased; 

可能会为你工作

是! 我找到了解决这个问题的方法。 这很奇怪,但对我有用。

所以,为了使它工作,把这个样式放在你想平滑的元素上:

 -webkit-border-bottom-left-radius: 1px; text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01); overflow: hidden; 

我已经建立了一个示例HTML文件 ,只是这种风格,所以你可以快速测试它。

 text-shadow: transparent 0px 0px 0px, #000 1px 2px 1px; 

要么

 text-shadow: transparent 0px 0px 0px, rgba(0,0,0, 0.75) 1px 2px 1px; 

经过测试,并在Opera,Chrome,Safari和Firefox的不同版本中正常工作。

这确实是在Windows系统(最终在其他地方)Firefox(左)和Google Chrome(右)中看到很多web字体(来自Typekit等的Google Web字体以及高度专业的字体)的样子。 不是开玩笑! 为了澄清这一点:唯一完全搞砸Google Webfonts的浏览器是Google的浏览器Chrome。 这有多恶心? 在2013年Opera浏览器已经把它的渲染引擎切换到webkit(= Chrome中的渲染引擎),所以这个问题也存在于Opera中。

更多: http : //www.dev-metal.com/fix-ugly-font-rendering-google-chrome/