CSS 3学习——文本效果和@font-face
文本效果
关于文本效果，这里仅仅记录得到大多数浏览器支持的几个属性，分别是：
text-overflow
text-shadow
word-break
word-wrap
text-overflow
介绍text-overflow之前先介绍一个white-space属性。
white-space属性用来描述如何处理元素中的空白符，可以从父元素继承值。
可取值：
normal 默认值。连续地空白符会被合并，包括换行符。文本填充行盒时，会根据需要自动换行。
nowrap 连续的空白符（包括换行符）会被合并，但文本不会自动换行。文本会在同一行上填充，直到遇到<br>元素。
pre 连续的空白符会被保留，在遇到换行符或者<br>元素时才会换行。
pre-wrap 连续的空白符会被保留，文本会根据需要自动换行。
pre-line 连续的空白符会被合并（不包含换行符），文本会根据需要自动换行。
inherit 从父元素继承值。
下面的表格总结了各种 white-sapce 值的行为：
| 换行符 | 空格和制表符 | 文字转行 | |
|---|---|---|---|
normal |
合并 | 合并 | 转行 |
nowrap |
合并 | 合并 | 不转行 |
pre |
保留 | 保留 | 不转行 |
pre-wrap |
保留 | 保留 | 转行 |
pre-line |
保留 | 合并 | 转行 |
要看到text-overflow的效果，就要使文本不能换行。
text-overflow的可取值：
clip 默认值。文本溢出时，修剪溢出的部分（剪掉）。
ellipsis 显示省略号来代替被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。（该值还没有得到浏览器的支持）
text-shadow
text-shadow用于向文本添加一个或多个阴影，原理与边框的阴影相同。
该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值。省略的长度值为0。
语法：
text-overflow：x-shadow y-shadow blur color;
x-shadow 指定阴影相对于文字的水平偏移量。若是负值，则阴影位于文字的左边。
y-shadow 指定阴影相对于文字的垂直偏移量。若是负值，则阴影位于文字的上边。
blur 可选，<length>值，默认为 0。指定阴影的模糊距离，值越大，模糊半径越大，阴影也越大越淡。
color 可选，指定阴影的颜色。
word-break
该属性指定一个单词如何换行。
通过这个属性可以让浏览器实现任意位置的换行。
可取值：
normal 默认值。使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
word-wrap
现在该属性已经被重命名为overflow-wrap。是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。
可取值：
normal 表示在正常的单词结束处换行。
break-word 表示如果行内没有多余的地方容纳该单词到结尾，则哪些正常的不能被被分割的单词会被强制分割换行。
@font-face
在CSS 3中，开发者可以通过@font-face来自定义字体。
语法：
@font-face {
font-family: YourFontName;
src: [url() || local() ]+ || format(str)?;
sRules;
}
通过font-family可以给自定义字体命名任意自己喜欢的名字，要用引号包裹。
通过 src 可以加载存放在服务器上的字体文件（受同源策略限制），也可以使用本地字体。使用本地字体时，用 local() 函数引用（字体名字不加引号）。在加载服务器上的字体文件时，可以用format()函数指定字体文件相应的文件类型。
得到支持的字体文件的类型有以下几种：
| String | Font Format | Common extensions |
|---|---|---|
| "woff" | WOFF (Web Open Font Format) | .woff |
| "truetype" | TrueType | .ttf |
| "opentype" | OpenType | .ttf, .otf |
| "embedded-opentype" | Embedded OpenType | .eot |
| "svg" | SVG Font | .svg, .svgz |
传入format()函数的参数为上表中第一列中的一个（根据具体引用字体文件的后缀确定）。
不同浏览器对以上几种字体文件的支持情况不同，具体可以看这篇文章。
sRules 是具体的字体样式，相关属性如下：
font-variant
font-stretch
font-weight
font-style
unicode-range
font-variant
可取值
normal 默认值。正常字体。
small-caps 字体为小型大写字母。
以上两个值在CSS 1 中定义，CSS 3 中新加的值还没有得到浏览器支持。
font-stretch
查资料，这个属性只有IE和Firefox支持，但没有效果。
unicode-range
该属性的作用是告知浏览器，通过@font-face引入的字体覆盖了Unicode字符体系的哪些部分，以便浏览器仅在该范围内的字符使用该字体，使用时要把限定了字符范围的自定义字体名字放在对应元素font-family的第一个的位置上。具体看参考资料中的第5条。
参考资料
1、W3school
2、MDN
3、官方规范
