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 回答