分享
为什么问答平台  ›  专栏  ›  技术社区  ›  avok00

Google Chrome文本阴影渲染 - Google Chrome text shadow rendering

  •  49
  • avok00  · 技术社区  · 2 周前

    谷歌Chrome在实现CSS3文本阴影方面有一个非常令人恼火的缺陷。应用文本阴影时,将关闭子像素抗锯齿。没有任何数量的-webkit字体平滑将说服它否则。粗糙的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=en

    Chromium项目中提交了一个bug(版本23440)。这个bug已经存在一年多了,仍然没有分配给任何人。谷歌开发人员看到了它,认为它不那么重要,让它老化。结果他们只修复了“流行”的虫子,这种做法太差劲了,看起来令人印象深刻!我对铬很失望!网络排版和CSS3每天被越来越多的人使用,使网络变得更加美丽!令人遗憾的是,这种问题的存在减缓了这一速度。

    所以,需要公众的努力来修复这个问题。告诉其他人,写在你的博客里。你可以去 http://code.google.com/p/chromium/issues/detail?id=23440 投票赞成这个问题。你可以通过点击位于页面左上角的星号(需要某种类型的Google帐户-Gmail,等等)来实现。

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

    1. 找到一个技术解决方案。
    2. 让谷歌用Chrome解决这个问题。

    我将投票选出每一个发布到一篇关于这个问题的文章的链接,并将其标记为“公认的最佳单技术解决方案”或“公共努力”。

    3 回复  |  直到 5 年前
        1
  •  26
  •   Camilo Martin    7 年前

    @sebastian's fix may not work for old versions of chrome.
    铁浏览器(铬叉)v3.0.197.0下的屏幕截图:

    所有被分配阴影的对象看起来都一样, -webkit font-smoothing=>code>与 -webkit text-stroke=>code>没有效果。

    相反,我一直在尝试,直到我想出这个解决方案: http://jsbin.com/acalu4

    tldr: add an innocuous 0 0 0 transparent, before your other shadow(s).

    已知问题: 某些浏览器只能处理1 text shadow 。为了不影响他们(杀死他们唯一的阴影),这应该通过Javascript应用于Chrome。

    可能不适用于旧版本的Chrome。
    铁浏览器(铬叉)v3.0.197.0下的屏幕截图:

    所有被分配阴影的人看起来都一样 -webkit-font-smoothing 也没有效果 -webkit-text-stroke .

    相反,我一直在试验,直到想出这个解决方法: http://jsbin.com/acalu4

    TLDR: 添加无害的 0 0 0 transparent, 在其他阴影之前。

    已知问题: 某些浏览器只能处理1 text-shadow . 为了不影响他们(杀死他们唯一的阴影),这应该只通过javascript应用到Chrome。

        2
  •  11
  •   Sebastian Patane Masuelli    8 年前

    第一部分(技术解决方案):给文本一个很细的笔触。

    尝试这个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/

        3
  •  1
  •   Nathan Querido    5 年前

    我找到了解决办法。它似乎可以在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);