在Internet Explorer中模拟文本笔划

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测试版)都支持文本阴影,此外,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或更早版本进行优化。

2 个解决方案

#1

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

#2

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

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 useragentman with 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;
}

#1