很多目前都不支持的，就不写了。至少 chrome 得支持吧，要不没法试验

对于以写特定在字符组合会出现一些字符见空隙的问题，过大或过小

比如 WA ff 之类的。

text-rendering 来帮忙了

h1:first-child {
  text-rendering: optimizeLegibility;
}

<h1>WAR on waffles</h1>
<h1>WAR on waffles</h1>

可选项：

optimizeSpeed
geometricPrecision
optimizeLegibility

文字折行时的 - hyphens

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

例子看这个吧 https://css-tricks.com/almanac/properties/h/hyphenate/

注意 Chrome 不支持

Text Decoration

underline Defines a line below the text //下划线
overline Defines a line above the text //头顶的线
line-through Defines a line through the text //中穿线

##-webkit-background-clip

只有 webkit 支持，先效果很好

h1 {
  font: 300px Bebas;
  background: url(small.png);
  -webkit-background-clip: text;
  color: #000;
  -webkit-text-fill-color: transparent;
}

这两个属性是为了在非 webkit 浏览器下也能显示基本的字，不加的话就是透明字了

color: #000;
-webkit-text-fill-color: transparent;

##Text Shadow

h1 {
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
    0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0
      1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

The Big Headline

4 个值：

第一个是横向和原字的距离
第二个是纵向的距离
第三个是模糊程度
第四个是颜色

3D 文字最简单的就是在单一的方向上增加距离，并渐变颜色,如果像上面的代码外加一些模糊会更真实

h1 {
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c5c5c5, 0 3px 0 #bbb, 0 4px 0 #b5b5b5,
    0 5px 0 #aaa, 0 6px 0 #a5a5a5;
}

The Big Headline

下面代码是单纯增加字的外边修饰

h1 {
  text-shadow: 0 0 10px #fff, 0 0 20px rgba(255, 255, 255, 0.3),
    0 0 30px rgba(33, 207, 255, 1), 0 0 40px rgba(33, 207, 255, 0.8),
    0 0 60px rgba(33, 207, 255, 0.5), 0 0 100px rgba(33, 207, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}