Question

所有浏览器（Internet Explorer除外（甚至IE9测试版）都支持text-shadow，此外，webkit浏览器似乎理解-webkit-text-stroke。但是如何在Internet Explorer中模拟文本笔划？我已经看过可用的过滤器，在我看来，没有一个可以用来模拟这个，除了可能来自Glow，但它会产生模糊的光晕，而不是一个坚实的轮廓。

有没有办法使用CSS和/或Microsoft过滤器/行为和/或JavaScript来实现这一目标？

我不需要解决方案在IE的古老版本中工作，我的布局不会针对IE7或更早版本进行优化。

Answer 1

我一直在寻找一种跨浏览器的文字笔划解决方案，当覆盖在背景图像上时可以正常工作。我认为我有一个解决方案，不涉及额外的标记，js和IE7-9中的工作（我没有测试6），并且不会导致别名问题。

这是使用CSS3 text-shadow的组合，除了IE（http://caniuse.com/#search=text-shadow）之外，它有很好的支持，然后使用IE的过滤器组合。 CSS3文本笔划支持目前很差。

IE过滤器

辉光滤镜（http://www.impressivewebs.com/css3-text-shadow-ie/）看起来很糟糕，所以我没有使用它。

David Hewitt的答案涉及在方向组合中添加阴影滤镜。然后遗憾地删除了ClearType，因此我们最终得到了错误的别名文本。

然后我将useragentman上建议的一些元素与投影阴影过滤器结合起来。

将它们放在一起

此示例为带有白色笔划的黑色文本。我正在使用条件html类到target IE。

#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
    background-color: white;
    filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
    zoom: 1;
}

Answer 2

这里有一个我从前面挖出来的： http://jsfiddle.net/kovalchik/yJff9/

我无法测试它是否真的有效，不过因为我现在正在使用mac。它看起来像是一个肮脏的黑客。但值得一试：P

在Internet Explorer中模拟文本笔划

2 个答案: