美丽又悲剧的text-shadow

发表于

text-shadow,CSS3的好东西之一,给文字加上阴影,这让9x年代喜欢在Word里到处加艺术字的本人仿佛又找回了童年,那个凭着一台电脑在一群小屁孩中间如鱼得水的童年。

她的美丽

text-shadow如果用得好,确实可以塑造出相当不错的效果,下图是著名博客考据癖上的默认文字效果:

文字阴影效果图

使用较淡的色彩(#e9e9e9)以及恰到好处的阴影(#fbfbfb 0 1px 0)制造出一种雕刻一般的感觉,增加了字体的锐度,增添了视觉的享受。

她的悲剧

只是很可惜,如果你是一个喜欢把正在看的段落涂黑的人,那么你就悲剧了,请看:

文字阴影问题图解

这已经不能用“糟糕”来形容了,我相信这样的字看上几百行,我一定能享受到久违的晕车的感觉,并将一整天吃下去的东西都还给大地母亲。

可以看看你现在使用的浏览器是不是还有这样的问题:

缘由

其实这一切不是text-shadow这属性的错,错的是浏览器。究其根源,将这段文字放大就很容易发现:

放大效果图

这么看就很容易发现,在涂黑后,浏览器丝毫不经过大脑地,将字体和阴影的颜色都置成了白色,一个直接的后果就是字产生了“重影”的效果,随着字号的缩小,重影更难分辨,给人视觉的感觉只是“模糊”,看久了不晕才怪。

请别让每一个美丽都变成悲剧

CSS3提出了一个美好的属性,让原本单调的世界变得丰富多彩,只是浏览器却那么随意、那么不负责任地去实现,让一个美丽堕落成为悲剧。

能不能请各家渲染引擎,认真点、负责点,不要让那么多前端人员期待的未来,突然之间变得如此不堪?