javascript - 在 Internet Explorer 中模拟文本笔画

Question

所有浏览器，除了 Internet Explorer(甚至是 IE9 beta，显然)都支持 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;
}