所以我试图在网页上实现 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 示例: