CSS3高级文本效果-优快云博客

一、添加和使用自定义字体

1、传统的字体定义

一般情况下，开发者会使用CSS中的font-family属性来定义字体，通常会根据优先级定义多个，如果用户的计算机上安装了font-family中定义的字体，就会使用指定的字体（优先使用定义时顺序靠前的）。如果没有定义字体或者定义的字体客户端上没有安装，就会显示默认的字体。

2、个性化的字体定义

@font-face属性可以加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。@font-face的基本语法如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个性化字体定义</title>
    <style>
        @font-face {
            font-family: myFirstFont;
            src: url('Sansation_Light.ttf'), url('Sansation_Light.eot');
            /* IE9 */
        }
        div {
            font-family: myFirstFont;
        }
    </style>
</head>
<body>
    <p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字体.</p>
    <div>
        使用 CSS3,网站终于可以使用字体以外的预先选择“合法”字体
    </div>
</body>
</html>

注：一般来说，个性化的字体需要给字体的版权方付费后才能使用。

3、个性化的字体图标

可以引入一些字体图标插件，例如Font Awesome，引入其相关的CSS和字体文件后，在需要的地方使用"<i class=“图标类”></i>"这样的形式即可。
例如：

<p><i class="fa fa-camera-retro"></i>照相机</p>

二、使用反射让文字倒映

反射（box-reflect）属性器时并不能算是文字的属性，它也可以用在图片等其他方面。box-reflect属性目前只有webkit核心浏览器支持，不过由于其效果对于布局没有任何影响，我们使用它并不会造成其他浏览器出现问题。

反射的基本语法

反射的基本语法如下：
.box-reflect:{<方向><间距><渐变效果>}
（1）方向：可以选择above、below、left、right。
（2）间距：表示倒影和元素本身之间的额外距离。
注：padding同样会影响倒影之间的间距。
(3)渐变效果：

- none：无遮罩图像。
- <url>：使用绝对或相对地址指定遮罩图像。
- <linear-gradient>：使用线性渐变创建遮罩图像。
- <radial-gradient>：使用径向（放射性）渐变创建遮罩图像。
- <repeating-linear-gradient>：使用重复的线性渐变创建遮罩图像。
- <repeating-radial-gradient>：使用重复的径向（放射性）渐变创建遮罩图像。

注：倒影不占据空间。
相关示例代码：

box-reflect:below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));

linear-gradient共有3个参数：

第1个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，则表示从左上角到右下角，不过这个参数可以省略，默认是top。
第2个和第3个参数分别是起点颜色和终点颜色。还可以在它们之间插入更多的参数，表示多种颜色的渐变。

注：transparent是rgba(0,0,0,0)的别名。

三、字体阴影——光晕、浮雕、投影效果

字体阴影（text-shadow）的基本语法：

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

test-shadow有3个长度参数，第1个表示水平偏移，第2个表示垂直偏移，第3个表示模糊程度（可选）。颜色值可以写在最后，也可以写在最前。

说明：text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有2个或3个长度值和一个可选的颜色值进行规定。省略时的长度为0。

光晕：当偏移量设为0，就可以构建出光晕的效果。

浮雕：垂直偏移量和水平偏移量设置相同的值，就可以构建出凸起的浮雕效果。

四、字体描边

字体描边（text-stroke）属性目前只有webkit核心浏览器支持。
相关的语法：
text-stroke:width color;
width表示描边的宽度，color表示描边的颜色。
由于text-shadow在和滤镜的配合下可以通吃几乎所有的浏览器，故推荐使用该方法。
示例（以下两个方式所实现的效果表现方面类似）：

text-stroke:1.0px #000;

text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;

注：IE6~9浏览器可以使用特有的滤镜来实现该效果。

五、字体分栏

CSS3的多列效果，需要用到以下3个属性：

column-count：定义分列的数量。
column-gap：定义每一列中间的宽度。
column-rule：定义分栏中间的样式。
column-rule的语法：

column-rule:样式宽度 样式类型 样式颜色;

column-rule-style的可选项：

none：没有定义规则。
hidden：定义隐藏规则。
dotted：定义点状规则。
dashed：定义虚线规则。
solid：定义实现规则。
double：定义双线规则。
groove：定义3D grooved规则，该效果取决于宽度和颜色值。
ridge：定义3D ridged规则，该效果取决于宽度和颜色值。
inset：定义3D inset规则，该效果取决于宽度和颜色值。
outset：定义3D outset规则，该效果取决于宽度和颜色值。

注：column-rule中装饰线的宽度不会影响column-gap中定义的宽度。IE10和Opera支持多列属性。Firefox需要前缀-moz-。Chrome和Safari需要前缀-webkit-。IE9以及更早的版本不支持多列属性。

六、处理字体溢出和破字

在文字完整的情况下进行截断处理，并加上一些提示，这种情况下可以使用CSS的text-overflow属性。

.test{
    display: block;
    white-space: nowrap; /*文本不换行*/
    text-overflow: ellipsis; 
    overflow: hidden; /*不允许出现滚动条*/
    width: 100px;
}

text-overflow的参数选项：
clip：修剪文本。
ellipsis：显示省略号来代表被修剪的文本。
string：使用给定的字符串来代表被修剪的文本。

text-overflow属性目前支持所有主流浏览器，为了兼容老版本的Opera浏览器，可以加上Opera浏览器的私有属性-o-text-overflow:ellipsis。

注：老版本的火狐浏览器不支持text-overflow属性。如果追求完美适配的话，可以选择使用Javascript来进行控制。