3.3　CSS3文本样式

CSS3优化和增强了CSS 2.1的字体和文本属性，使网页文字更具表现力和感染力，丰富了网页文本的样式和版式。

3.3.1　定义文本阴影

视频讲解

在CSS3中，可以使用text-shadow属性为文字添加阴影效果，用法如下。

     text-shadow：none | <shadow> [ , <shadow> ]*
     <shadow> = <length>{2,3} &&<color>?

text-shadow属性的初始值为无，适用于所有元素。取值简单说明如下。

☑　none：无阴影。

☑　<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值。

☑　<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值，正值偏右或偏下，负值偏左或偏上。

☑　<length>③：如果提供了第3个长度值，则用来设置对象的阴影模糊值（即模糊半径）。不允许为负值。

☑　<color>：设置对象的阴影的颜色，该值可选。

【示例】本示例为段落文本定义一个简单的阴影效果，演示效果如图3.13所示。

     <style type="text/css">
     p {
         text-align: center;
         font: bold 60px helvetica, arial, sans-serif;
         color: #999;
         text-shadow: 0.1em 0.1em #333;
         }
     </style>
     <p>文本阴影：text-shadow</p>

图3.13　定义文本阴影

text-shadow: 0.1em 0.1em #333;声明了右下角文本阴影效果，如果把投影设置到左上角，则可以这样声明：

     p {text-shadow: -0.1em -0.1em #333;}

演示效果如图3.14所示。

同理，如果设置阴影在文本的左下角，则可以设置如下样式。

     p {text-shadow: -0.1em 0.1em #333;}

演示效果如图3.15所示。

图3.14　定义左上角阴影

图3.15　定义左下角阴影

也可以增加模糊效果的阴影：

     p{text-shadow: 0.1em 0.1em 0.3em #333; }

效果如图3.16所示。

或者定义如下模糊阴影效果：

     text-shadow: 0.1em 0.1em 0.2em black;

效果如图3.17所示。

图3.16　定义模糊阴影（1）

图3.17　定义模糊阴影（2）

在阴影偏移之后，可以指定一个模糊半径。模糊半径是个长度值，指出模糊效果的范围。模糊效果的具体算法没有指定。在阴影效果的长度值之前或之后还可以选择指定一个颜色值。如果没有指定颜色，那么将使用color属性值来替代。

3.3.2　定义溢出文本

视频讲解

text-overflow属性可以设置超长文本省略显示。基本语法如下。

     text-overflow：clip | ellipsis

适用于块状元素，取值简单说明如下。

☑　clip：当内联内容溢出块容器时，将溢出部分裁切掉，为默认值。

☑　ellipsis：当内联内容溢出块容器时，将溢出部分替换为“...”。

由于W3C规范放弃了对text-overflow属性的支持，所以，Mozilla类型浏览器也放弃了对该属性的支持。不过，Mozilladevelopercenter推荐使用-moz-binding的CSS属性进行兼容。Firefox支持XUL（XUL是一种XML的用户界面语言），这样就可以使用-moz-binding属性来绑定XUL里的ellipsis属性了。

【示例】本示例设计了一个新闻列表有序显示效果，对于超出指定宽度的新闻项，则使用text-overflow属性省略并附加省略号，避免新闻换行或者撑开版块，演示效果如图3.18所示。

图3.18　设计固定宽度的新闻栏目

示例代码如下。

3.3.3　定义文本换行

视频讲解

在CSS3中，使用word-break属性可以定义文本自动换行。基本语法如下。取值简单说明如下。

     word-break：normal | keep-all | break-all

☑　normal：为默认值，依照亚洲语言和非亚洲语言的文本规则，允许在字内换行。

☑　keep-all：对于中文、韩文、日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。

☑　break-all：与normal相同，允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本，如使连续的英文字母间断行。

【补充】

word-break原来是IE私有属性，在CSS3中被Text模块采用，得到Chrome和Safari等浏览器的支持，但不支持keep-all取值。

另外，IE自定义了多个换行处理属性：line-break、word-break、word-wrap，CSS1也定义了white-space。这几个属性简单比较如下。

☑　line-break：指定如何（或是否）断行。除了Firefox，其他浏览器都支持。取值说明如下所示。

●　auto：使用默认的断行规则分解文本。

●　loose：使用最松散的断行规则分解文本，一般用于短行的情况，如报纸。

●　normal：使用最一般的断行规则分解文本。

●　strict：使用最严格的断行规则分解文本。

☑　word-wrap：允许长单词或URL地址换行到下一行。所有浏览器都支持。取值说明如下所示。

●　normal：只在允许的断字点换行（浏览器保持默认处理）。

●　break-word：在长单词或URL地址内部进行换行。

☑　word-break：指定怎样在单词内断行。取值说明参考上面语法。

☑　white-space：设置如何处理元素中的空格。所有浏览器都支持。取值说明如下所示。

●　normal：默认处理方式。

●　pre：使用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。

●　nowrap：强制在同一行内显示所有文本，合并文本间的多余空白。

●　pre-wrap：使用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。

●　pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

【拓展】

在IE浏览器下，使用word-wrap:break-word;声明可以确保所有文本正常显示。在Firefox浏览器下，中文不会出现任何问题，英文语句也不会出现问题。但是，长串英文会出现问题。为了解决长串英文会出现的问题，一般将word-wrap:break-word;和word-break:break-all;声明结合使用。但是，这种方法会导致普通的英文语句中的单词被断开显示（IE下也是）的情况。现在的问题主要存在于长串英文和英文单词被断开的情况。

为了解决这个问题，可使用word-wrap:break-word;overflow:hidden;，而不是word-wrap:break-word;word-break:break-all;。word-wrap:break-word;overflow:auto;在IE下没有任何问题，但是在Firefox下，长串英文单词就会被遮住部分内容。

【示例】本示例将在页面中插入一个表格，由于标题行文字较多，标题行常被撑开，影响浏览体验。为了解决这个问题，借助CSS换行属性进行处理，代码如下。比较效果如图3.19所示。

图3.19　禁止表格标题文本换行显示

3.3.4　动态添加文本

视频讲解

content属性属于内容生成和替换模块，可以为匹配的元素动态生成内容，这样就能够满足在CSS样式设计中临时添加非结构性的样式服务标签，或者添加补充说明性内容等。

content属性的简明语法如下。

     content: normal | string | attr() | url() | counter() | none;

取值简单说明如下。

☑　normal：默认值。表现与none值相同。

☑　string：插入文本内容。

☑　attr()：插入元素的属性值。

☑　url()：插入一个外部资源，如图像、音频、视频或浏览器支持的其他任何资源。

☑　counter()：计数器，用于插入排序标识。

☑　none：无任何内容。

在CSS 3 Generated Content工作草案中，content属性添加了更多的特征，例如，插入以及移除文档内容的能力，可以创建脚注、结语和段落注释。但是目前还没有浏览器支持content的扩展功能。

【示例】本示例使用content属性，配合CSS计数器设计多层嵌套有序列表序号设计，代码如下。效果如图3.20所示。

图3.20　使用CSS技巧设计多级层级目录序号

3.3.5　自定义字体类型

视频讲解

CSS3允许用户通过@font-face规则，加载网络字体文件，实现自定义字体类型的功能。@font-face规则在CSS3规范中属于字体模块。

@font-face规则的语法格式如下。

     @font-face { <font-description> }

@font-face规则的选择符是固定的，用来引用网络字体文件。<font-description>是一个属性名值对，格式类似如下样式。

     descriptor: value;
     descriptor: value;
     descriptor: value;
     descriptor: value;
     [...]
     descriptor: value;

属性及其取值说明如下。

☑　font-family：设置文本的字体名称。

☑　font-style：设置文本样式。

☑　font-variant：设置文本是否大小写。

☑　font-weight：设置文本的粗细。

☑　font-stretch：设置文本是否横向拉伸变形。

☑　font-size：设置文本字体大小。

☑　src：设置自定义字体的相对路径或者绝对路径。注意，该属性只能在@font-face规则里使用。

【示例】这是一个简单的示例，演示如何使用@font-face规则在页面中使用网络字体。示例代码如下，演示效果如图3.21所示。

     <style type="text/css">
     /* 引入外部字体文件 */
     @font-face {
     /* 选择默认的字体类型 */
     font-family: "lexograph";
     /* 兼容IE */
     src: url(http://randsco.com//fonts/lexograph.eot);
     /* 兼容非IE */
     src: local("Lexographer"), url(http://randsco.com/fonts/lexograph.ttf) format("truetype");
 }
 h1 {
     /* 设置引入字体文件中的lexograph字体类型 */
     font-family: lexograph, verdana, sans-serif;
     font-size:4em;
     }
 </style>
 <h1>http://www.baidu.com/</h1>

图3.21　设置为lexograph字体类型的文字