css3 文字镂空

今天男朋友问我怎么做镂空描边字体，之前都没接触就去百度一下了，男朋友做出来也告诉我怎么做，又接触到一个css3炫酷的样式，又知道一个新知识点，前端道路慢慢积累，先做一下笔记

---

先看一下效果图片：

上面的文字都使用了镂空字体，最后一个是使用自定义字体设置

---

html:

<p>花花和锋哥加油，前端道路慢慢积累</p>

<p class="hh">花花和锋哥加油，前端道路慢慢积累</p>

---

css:

p{

             /*镂空效果重点是下面加粗的样式*/

            color: transparent;

             -webkit-text-stroke: 1px #000;

            letter-spacing: 0.04em;

            font-size: 100px;

            font-weight: bold;

            text-align: center;

}

/*这个是回顾昨天发的字体自定义设置样式*/

@font-face{

       font-family: xujinglei;

          src: url('xujinglei.ttf')

                  ,url('xujinglei.eot');  /* IE9+ */

}

.hh{

       font-family: xujinglei;

}