跨浏览器文本笔划＆amp;模糊

Question

所以我试图让网页上的photoshop文字效果发生。 基本上文本是白色的，在笔画之外还有一个坚实的黑色轮廓和白色模糊。

跨浏览器地狱！

我一直在玩各种文字阴影，文字笔画和ms过滤器，但是无法在所有浏览器中获得看起来一致的内容。 Firefox显示大纲，但它是灰色的，似乎无法在IE中使用过滤器组合。这是我的一项努力：

color: #FFF;
-webkit-text-fill-color: white;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
text-shadow: 1px 1px 4px #ffffff, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
letter-spacing: -3px;
font-style: italic;
filter: glow(color=black,strength=1);  

我也在使用带@fontface的嵌入字体。

是否有人知道可能允许我设置此文本样式的jquery解决方案？ 我真的不想诉诸图像，因为整个网站都使用了文本样式。

非常感谢任何建议！

＆LT; ---------------- EDIT -----------------＆GT;

太真实我有点模糊。昨晚很晚，并希望有一个神奇的jquery解决方案或类似的东西。我还没有使用SVG文本，所以我今天早上肯定会尝试一下，因为它看起来会处理大多数流行的浏览器。

据我所知，Photoshop和网页设计非常不同，但我提供了PSD，并且必须尽我所能建立一个网站。

我在Mac上工作并通过Virtual Box测试IE。目前我正在使用IE9，但现在有一份IE10的副本供进一步测试。

这是我想要实现的一个例子：

Answer 1

正如其他人所说，这将是困难的;它可能比它的价值更麻烦。此外，JQuery肯定不适合这项工作。

正如您已经发现的那样，text-shadow样式将为您提供文本背后的模糊效果。如果文本大纲确实对您很重要，我会使用内联SVG：

<svg>
    <text x="80" y="80" stroke="red" font-size="80px">Hi</text>
</svg>

（请参阅this fiddle。内联SVG的跨浏览器兼容性：caniuse。）

不幸的是，如果您使用内联SVG，则无法使用CSS text-shadow，因此您必须使用feGaussianBlur创建SVG过滤器。