带有轮廓的CSS 3文本阴影

Question

我有一个名为MyriadPro-BoldIt的字体，我在photoshop上使用它来创建如下文本设计。

我尝试使用css添加此样式，方法是将以下代码添加到我之前转换为网络字体的相同字体

-webkit-text-stroke: 1px black;
color: white;
text-shadow:3px 3px 0 #000,-1px -1px 0 #000, 1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;

但它没有给出相同的结果。任何人都知道如何使用css创建这种字母？

Answer 1

我能够做到这样的事情。

h1 {
    font-size: 100px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff,
            -1px 1px 0 #fff, 3px 3px 5px #333;
}​

See demo

Answer 2

你试过简单的尝试：

  color: black;
text-shadow:
  2px 2px 0 white,
  3px 3px 0 gray;

你必须调整坐标和字体大小才能看起来很好。 http://codepen.io/gc-nomade/pen/rnmdv/

Answer 3

这是一个效果很好的演示：http://jsfiddle.net/XLRbQ/

-webkit-text-fill-color: black;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: white;
    text-shadow: 5px 5px 5px #000;

还有CSS-Tricks教程：http://css-tricks.com/adding-stroke-to-web-text/