带轮廓的CSS 3文字阴影

Question

I have font called MyriadPro-BoldIt, I used that on photoshop to create a text design like below.

I tried to add this style using css by adding below codes to the same font which I converted to web fonts before

-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;

but it is not giving same results. Anyone knows how to create this kind of letters using css?

Answer 1

I was able to do something like this.

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

have you tried simply:

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

you have to tune coordonates and font-size in order to have something looking fine. http://codepen.io/gc-nomade/pen/rnmdv/

Answer 3

Here is a demo that works well: 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;

And also a tutorial CSS-Tricks: http://css-tricks.com/adding-stroke-to-web-text/