javascript 在 Internet Explorer 中模拟文本笔画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4567677/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simulating text-stroke in Internet Explorer
提问by mingos
All browsers, with the exception of Internet Explorer (even the IE9 beta, apparently) support text-shadow, and additionally, webkit browsers seem to understand -webkit-text-stroke. But how to emulate text stroke in Internet Explorer? I've had a look at the available filters and it seems to me that none can be used to simulate this, apart maybe from Glow, but it creates a blurry glow, not a solid outline.
所有浏览器，除了 Internet Explorer（甚至 IE9 测试版，显然）都支持text-shadow，此外，webkit 浏览器似乎可以理解-webkit-text-stroke. 但是如何在 Internet Explorer 中模拟文本笔画？我查看了可用的过滤器，在我看来，除了 Glow 之外，没有任何过滤器可以用来模拟这一点，但它会产生模糊的光晕，而不是实线轮廓。
Is there any way to achieve this using CSS and/or Microsoft filters/behaviours and/or JavaScript?
有没有办法使用 CSS 和/或 Microsoft 过滤器/行为和/或 JavaScript 来实现这一点？
I don't need the solution to work in ancient versions of IE, my layout isn't going to be optimised for IE7 or earlier.
我不需要在旧版本的 IE 中工作的解决方案，我的布局不会针对 IE7 或更早版本进行优化。
采纳答案by David Hewitt
There's this here that I dug up from a while back: http://jsfiddle.net/kovalchik/yJff9/
这是我从前挖出来的：http: //jsfiddle.net/kovalchik/yJff9/
I can't test if it actually works or not though since I'm using a mac at the moment. It looks like a bit of a dirty hack as well. But it might be worth a try :P
我无法测试它是否真的有效，因为我目前使用的是 mac。它看起来也有点脏。但它可能值得一试:P
回答by crdunst
I was looking for a cross-browser text-stroke solution that works when overlaid on background images. think I have a solution for this that doesn't involve extra mark-up, js and works in IE7-9 (I haven't tested 6), and doesn't cause aliasing problems.
我一直在寻找一种跨浏览器的文本笔画解决方案，它可以在叠加在背景图像上时起作用。我想我有一个解决方案，它不涉及额外的标记、js 并且可以在 IE7-9 中工作（我没有测试过 6），并且不会导致别名问题。
This is a combination of using CSS3 text-shadow, which has good support except IE (http://caniuse.com/#search=text-shadow), then using a combination of filters for IE. CSS3 text-stroke support is poor at the moment.
这是使用CSS3 text-shadow 的组合，除了IE（http://caniuse.com/#search=text-shadow）外都有很好的支持，然后使用IE的过滤器组合。CSS3 文本笔画支持目前很差。
IE Filters
IE过滤器
The glow filter (http://www.impressivewebs.com/css3-text-shadow-ie/) looks terrible, so I didn't use that.
发光过滤器 (http://www.impressivewebs.com/css3-text-shadow-ie/) 看起来很糟糕，所以我没有使用它。
David Hewitt's answer involved adding dropshadow filters in a combination of directions. ClearType is then removed unfortunately so we end up with badly aliased text.
David Hewitt 的回答涉及在组合方向上添加阴影过滤器。不幸的是，ClearType 被删除了，所以我们最终得到了严重的别名文本。
I then combined some of the elements suggested on useragentmanwith the dropshadow filters.
然后我将useragentman上建议的一些元素与 dropshadow 过滤器结合起来。
Putting it together
把它放在一起
This example would be black text with a white stroke. I'm using conditional html classes by the way to target IE.
此示例将是带有白色笔划的黑色文本。我正在使用条件 html 类来定位 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;
}
