1 文本效果

1-1 文本阴影

h1 { text-shadow: 5px 5px 5px #37b37a }

运行效果：

text-shadow: h-shadow v-shadow blur color;

    h-shadow 必需。水平阴影的位置。允许负值。

    v-shadow 必需。垂直阴影的位置。允许负值。

    blur 可选。模糊的距离。

    color 可选。阴影的颜色

1-2 自动换行

p {

  width: 100px;

  border: 1px solid;

  word-wrap: break-word

}

运行效果：

左图为未设置word-wrap 属性，右图为设置word-wrap 属性

word-wrap 属性允许您允许文本强制文本进行换行 - 即对单词进行拆分

1-3 溢出

p {

width: 200px;

border: 1px solid;

white-space:nowrap;/*空白 不换行*/

text-overflow: ellipsis;/*溢出 显示省略号*/

overflow: hidden/*溢出隐藏*/

}

运行效果：

2 字体

2-1 @font-face规则

当找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。“自己的”的字体是在 CSS3 @font-face 规则中定义的

2-2 使用您需要的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件

@font-face {

  font-family: myFirstFont;

  src: url('Sansation_Bold.ttf')

}

p { font-family: myFirstFont }

运行效果：

2-3 字体描述符

能够在 @font-face 规则中定义的所有字体描述符：

font-family：

值：  name

必需。规定字体的名称。

src ：

值：URL

必需。定义字体文件的URl

font-stretch：

值：normal  condensed  ultra-condensed  extra-condensed  semi-condensed          expanded  semi-expanded  extra-expanded  ultra-expanded

可选。定义如何拉伸字体。默认是 "normal"。

font-style：

值：ormal  italic  oblique

可选。定义字体的样式。默认是 "normal"。

font-weight：

值：normal  bold  100  200  300  400  500  600  700  800  900  

可选。定义字体的粗细。默认是 "normal"。

unicode-range：

值： unicode-range

可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。