CSS3--字体字符效果等

@Font-face 特性
可以用来加载字体样式，并且他还能够加载服务器端的字体文字（这个功能挺新颖）。

<p><font face="arial">arial courier verdana</font></p>

对比下以前的写法

<p><font style="font-family: arial">arial courier verdana</font></p>

获取服务端字体

@font-face { font-family: BorderWeb; src:url(BORDERW0.eot); } @font-face { font-family: Runic; src:url(RUNICMT0.eot); } .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

@font-face 是从服务端获取字体，路径为src的，而font-family则是给获取的路径命名，以方便在font-family中使用。

word-wrap text-overflow

word-wrap:break-word
在内部文字超过容器大小的时候自动换行。

text-overflow
设置或检索当 当前行超过容器边缘时如何显示。

text-overflow:clip(效果下图div3)
修剪文本，他会将超过容器的部分直接掩盖掉

text-overflow:ellipsis(效果下图div2)
显示省略号来代表被修剪的文本。

text-overflow：string （在w3cshool有这个值，但是并不好使，百度了一下 有人说在火狐下好使，没有去尝试，因为并没有用，不可能什么页面只在火狐下使用，所以可以忽略）

请大家仔细看上图，有几点需要注意的：
1、正常的文字和英文是可以被识别的，并且会自动换行，如上面class=”div1”我并没有写任何换行的样式。
但是当遇到连续的英文或数字时就不会，例如：16516546511，或alskjdfsasdlkjfasdf这样的，出现这些的时候一般都是作为编号、订单号什么的。
2、text-overflow 使用时前面一定要有overflow:hidden这个样式。否则无效。
3、因为正常的文字会被自动换行，想使用text-overflow时，需要使其不会换行，使用white-space:nowrap(使文字不换行) 这一个样式。eg:图中class=”div2” class=”div3”;

文字渲染（text-decoration）
text-fill-color:文字内部填充的颜色
text-stroke-color:文字边界填充的颜色
text-stroke-width:文字边界宽度

div { -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 2.75px; }