文本笔划交叉浏览器

Question

我正在尝试新的文本笔划功能，我在网上搜索了一个跨浏览器的解决方案。现在我只能用webkit属性找到它。

-webkit-text-stroke: 2px #FF1E00;

如果有办法让所有浏览器都以同样的方式显示，你能告诉我吗？

Answer 1

.strokeme
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}

来自：Outline effect to text

“我所做的是使用已经支持的text-shadow属性（我相信Chrome，Firefox，Opera和IE 9支持）。”

Answer 2

截至2012年5月24日 ^th ，没有跨浏览器解决方案，因为只有webkit支持http://caniuse.com/#search=text-stroke的实验性功能。您可以在元素上使用4或5 text-shadow来模拟（在某种程度上）。

演示：Text Stroke，在CSS-Tricks.com上

Answer 3

你可以尝试strokeText.js，一个普通的javascript插件。

• 笔划与文本不重叠 -webkit-text-stroke
• 支持除IE8及以下
以外的所有浏览器
• 可选文字
• 依赖 - 自由

完全披露，我制作了插件。

Answer 4

无法通过本机跨浏览器完成，但是可以为不支持的浏览器提供后备功能：

color: blue;
-webkit-text-stroke-color: blue;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 3px;

这样，Webkit浏览器将显示带有蓝色轮廓的白色文本，但其他浏览器仍将显示您选择的颜色（本例为蓝色）。