浅谈 CSS3 新特性：文字&字体

文本

text-shadow

text-shadow 为文字添加阴影，每个阴影值由元素在 X 和 Y 方向的偏移量、模糊半径和颜色值组成。

语法：

text-shadow: offset-x offset-y blur-radius color;

<color>：可选。可以在偏移量之前或之后指定。

如果想确保跨浏览器的一致性，请明确地指定一种颜色
<offset-x> <offset-y>：必选，指定阴影相对文字的偏移量。
- <offset-x>：指定水平偏移量，若是负值则阴影位于文字左边。
- <offset-y>：指定垂直偏移量，若是负值则阴影位于文字上面。
<blur-radius>：可选，数值越大，模糊半径越大，阴影也就越大越淡（wider and lighter）。

如果存在 text-decorations 也会被添加上阴影。

text-shadow: #fc0 1px 0 10px;
text-decoration: green wavy underline;

还可以添加多个阴影，阴影值之间用逗号隔开，可以做出霓虹的效果：

text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;

text-overflow

text-overflow：如何向用户发出未显示的溢出内容信号，它可以被剪切或显示一个省略号。

clip：默认值，直接截断文本。
ellipsis：用一个省略号来表示截断的文本，这个省略号被添加在内容区域中，因此会减少显示的文本。如果空间太小到连省略号都容纳不下，那么这个省略号也会被截断。

需要注意的是， 这个属性只对那些在块级元素溢出的内容有效，但是必须要与块级元素内联(inline)方向一致（举个反例：内容在盒子的下方溢出。此时就不会生效）。

为了能让 text-overflow 能够生效，我们一般要做一些配置：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

word-break

word-break 指定了怎么对单词进行断行。

normal：使用默认的断行规则。
break-all 对于 non-CJK 文本，可在任意字符间断行。
keep-all CJK 文本不断行，Non-CJK 文本表现同 normal。

自定义字体

@font-face，允许我们为自己的网站指定在线字体（自动下载给需要的用户），可以消除对用户电脑字体的依赖。

font-family：定义字体名字
src：远程字体文件位置的 URL （url）或者用户计算机上的字体名称，可以使用 local 语法通过名称指定用户的本地计算机上的字体。如果找不到该字体，将会尝试其他来源，直到找到可用的。

想要使用粗体字体，就必须添加一个包含粗体文字的 @font-face 规则。

例子：新定义了一个字体，正常粗细的字采用字体 Times New Roman，粗体字采用 Consolas。

@font-face {
  font-family: myFirstFont;
  src: local("Times New Roman");
  font-weight: normal;
}

@font-face {
  font-family: myFirstFont;
  src: local(Consolas);
  font-weight: bold;
}