【问题标题】:Webkit vs. Firefox vs. Opera text-shadow issueWebkit vs. Firefox vs. Opera text-shadow 问题
【发布时间】:2012-02-07 23:39:56
【问题描述】:

我似乎有一个问题,即 Firefox 在白色背景上显示 0.75 不透明度的模糊文本阴影很好,但在 Webkit 和 Opera 中它太暗/太脆了。谁是对的?是什么赋予了?我应该如何尝试解决它?谢谢。

注意事项:

这是一个例子JSFiddle

实际上,问题似乎出在图像处理过滤器的选择上。火狐版本似乎最模糊,其次是 Opera,然后是 Chrome/Safari (Webkit)。几乎看起来 Webkit 浏览器正在使用某种盒子过滤器来进行模糊处理,而 Firefox 正在使用更平滑的东西。 Webkit 中的阴影似乎太清晰了。

【问题讨论】:

  • 这只是它在不同浏览器中的工作方式......另外,如果你在 windows 中使用 webkit,它往往看起来比在 mac 中更清晰。
  • 你不应该担心这些事情。他们都支持它,这取决于他们是否正确实施它。毕竟它们是不同的浏览器。
  • 问题是使用不同的(实际的网络字体)阴影只会使整个字体看起来很难看且难以阅读(这是我的客户提出的)。我确实可以选择减轻我的阴影(我会这样做),但我从来没有真正理解这个问题,直到我意识到我是在 Firefox 中而不是在 Chrome/Safari 中盯着它。当这些实现细节确实很重要时,说“我不应该担心它”有点愚蠢。这就像告诉我不要担心字体抗锯齿。
  • 此外,我什至不确定什么行为正确的,或者它是否只是在要求中未指定。我希望不必深入研究规范并从我的开发人员同事那里收集我能做的事情。但由于这似乎是一个小问题,我可能不得不这样做。
  • 嗯,这里的重点是,在向客户端显示任何内容之前,请确保它在所有必需的浏览器中都是可读的。所有的浏览器都遵循 box-shadow 规范,它们只是使用不同的方法来达到相同的结果,但显然有细微的差别。根据我的经验,Firefox 总是有最好的 css3 输出。字体看起来更好,阴影和边框半径看起来更平滑。另一方面,Chrome,至少在 Windows 上,总是看起来有点差,但是,嘿,webkit 比任何其他引擎都有更多的功能。

标签: firefox webkit css


【解决方案1】:

如果我理解您的问题以便在 chrome 和 opera 上解决该问题,您必须将模糊半径设置为更高的值,以便在这三个浏览器上获得相同的结果。我知道这一点,因为我在 Firefox 和 Chrome 上使用了 box-shadow,我注意到了这一点。

查看这个实时示例:http://css3generator.com/

firefox:文本阴影:1px 10px 19px #050505; chrome和opera:1px 10px 29px #050505;

【讨论】:

  • 问题是,我不知道如何为不同的浏览器设置不同的模糊半径而没有一些重大的诡计。我不确定我添加多个阴影的建议是否更好,尽管它可能会占用更多处理器(尤其是如果我开始为元素设置动画等)
【解决方案2】:

查看http://www.w3.org/TR/css3-text/#changes(W3C 工作草案 2012 年 1 月 19 日)

一些不太稳定的功能已被推迟到第 4 级:...

...

  • “text-shadow”上的传播半径

所以没有具体说明意思。去图吧。

无论如何,我也(重新)发现text-shadow 接受逗号分隔的列表,所以我想如果我想进一步手动模糊它,如果我原来有

    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.75);

我可能会做类似的事情

 text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.1875),
   4px 6px 5px rgba(0, 0, 0, 0.1875),
   6px 4px 5px rgba(0, 0, 0, 0.1875),
   6px 6px 5px rgba(0, 0, 0, 0.1875);

根据需要添加阴影。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-12-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-17
    • 2019-02-05
    • 1970-01-01
    相关资源
    最近更新 更多