CSS-Google Chrome文字阴影渲染

Google Chrome浏览器在实施CSS3文本阴影时存在一个非常烦人的缺陷。 当应用文本阴影时,将关闭子像素抗锯齿功能。 否则,-webkit-font-smoothing不会说服它。 粗略的Alpha通道抗锯齿会导致阴影与字母混在一起,而这与像素化文本一起最终会产生非常难看的外观。 如果使用手写字体(例如Monotype Corsiva [http://www.newfonts.net/index.php?pa=show_font&id=130]),则这一点更加明显。

您可以在Twitter上清楚看到这一点的地方之一-[http://dev.twitter.com/pages/auth。]文本阴影用于此处的文本轮廓:在Chrome中查看页面,与FF或 IE,您将看到它有多糟。

对于较小的文本,效果甚至变得更糟,直到使它完全不可读为止。 有关此问题的技术讨论,请访问以下网址:[http://www.google.com/support/forum/p/Chrome/thread?fid=5d1c0f2082af0f21000483e9a516d36e&hl=zh-CN]

Chromium项目(问题23440)中提交了一个错误。 该错误已经存在大约一年了,至今仍未分配给任何人。 Google开发人员看到了它,认为它并不那么重要,并使其老化。 事实证明,他们只修复了“流行”的错误,这种做法太la脚了,看起来令人印象深刻! 我对Chrome非常失望! 每天,越来越多的人使用Web排版和CSS3来使Web变得更加美丽! 令人遗憾的是,存在这样的问题以减慢速度。

因此,需要公众努力才能解决此问题。 告诉其他人,在您的博客中写。 您可以访问[http://code.google.com/p/chromium/issues/detail?id=23440]并为该问题投票。 您可以通过点击页面左上角的星标来实现(某些类型的Google帐户需要-gmail等)。

为了使事情更清楚-我的问题有两个目标:

  1. 查找技术解决方法。
  2. 让Google在Chrome中解决此问题。

我将对有关该问题的文章的每个链接进行投票,并标记为公认的最佳技术解决方案或公共努力。

avok00 asked 2020-02-13T14:07:21Z
3个解决方案
26 votes

@sebastian的修复程序可能不适用于旧版本的Chrome。
Iron Browser(铬叉)v3.0.197.0下的屏幕截图:
                                                          
分配了阴影的所有对象看起来都一样,并且text-shadow-webkit-text-stroke无效。

取而代之的是,我进行了尝试,直到提出了此修复程序:[http://jsbin.com/acalu4]

tldr:在其他阴影之前添加无害的text-shadow

已知问题:某些浏览器只能处理1text-shadow。为了不影响它们(杀死它们唯一的阴影),应仅通过JavaScript将其应用于Chrome。

Camilo Martin answered 2020-02-13T14:08:04Z
11 votes

第一部分(技术解决方法):给文本加个细线。

尝试使用此CSS,您可能需要调整值以获得所需的效果。

-webkit-font-smoothing: subpixel-antialiased; /* or antialiased; */
-webkit-text-stroke: .10pt black; /* or 0.01em might be better */

只有Webkit浏览器(Chrome,Safari)可以读取它,因此它不会影响FF或IE。

在此处播放示例:[http://jsfiddle.net/SebastianPataneMasuelli/NfmU7/6/]

Sebastian Patane Masuelli answered 2020-02-13T14:08:40Z
1 votes

我找到了解决方案。 它似乎可以在Safari 4 +,Chrome(在8.0x上测试)和Firefox 3.5上运行。

尝试一下:

text-shadow: 0px 0px rgba(0,0,0,0.75), 
             0px 1px rgba(0,0,0,0.75), 
             1px 0px rgba(0,0,0,0.75), 
             0px 0px rgba(0,0,0,0.75);
Nathan Querido answered 2020-02-13T14:09:05Z
translate from https://stackoverflow.com:/questions/4046142/google-chrome-text-shadow-rendering