jquery - 跨浏览器文本描边和模糊

Question

所以我想在网页上制作一个 photoshop 文字效果。 基本上文本是白色的，有纯黑色轮廓和笔画外的白色模糊。

跨浏览器 hell !

我一直在使用各种文本阴影、文本笔划和 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 解决方案吗？ 我真的不想求助于图像，因为整个网站都使用了文本样式。

非常感谢任何建议!

<----------------编辑---------------->

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

我知道 Photoshop 和网页设计有很大的不同，但我得到了 PSD，我必须尽我所能构建一个网站。

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

这是我想要实现的 jpg 示例:

Answer 1

正如其他人所说，这将很困难；这很可能比它的值(value)更麻烦。此外，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 过滤器.