0

所以我试图在网页上实现 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 解决方案？我真的不想求助于图像，因为整个网站都使用了文本样式。

任何建议都非常感谢！

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

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

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

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

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

这是我想要实现的 jpg 示例

4

1 回答 1

1

正如其他人所暗示的那样，这将很困难。这很可能比它的价值更麻烦。此外，JQuery 肯定不是这项工作的正确工具。

正如您已经发现的那样，text-shadow样式会给您文本背后的模糊感。如果文本大纲对您来说真的很重要，我会为此使用内联 SVG：

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

（参见这个小提琴。内联 SVG 的跨浏览器兼容性：caniuse。）

不幸的是，如果您使用内联 SVG，则不能使用 CSS text-shadow，因此您必须使用feGaussianBlur.

于 2013-10-01T05:47:05.357 回答