Web前端开发技术与实践 第9章：文字样式 阮晓龙 13938213680 / rxl@hactcm.edu.cn http://web.51xueweb.cn 河南中医学院管理信息工程学科 河南中医学院网络信息中心 2015.11

本章主要内容 文本样式 字体样式 文本效果 使用服务器端字体 案例：诗歌排版 案例：使用服务器端字体实现网站图标

1.文本样式 由于Web是HTML文档的集合体，有动态的元素、静态的元素、功能展示的元素，它们的呈现不能够是杂乱无章的，这就需要对各种文字样式进行排版。 排版是对文本样式进行各种操作（例如改变文本的颜色、字符间距、行高、文字对齐方式等，并需实现文本缩进、字体装饰等内容）。 CSS的文字样式可以通过各种属性的综合使用实现各种样式的文字排版。

1.文本样式 1.1属性

1.文本样式 color属性规定文本的颜色。 这个颜色还会应用到元素的所有边框，除非被border-color或另外某个边框颜色属性覆盖。

现场演示： 案例9-01：文本颜色

1.文本样式 text-indent属性规定文本块中首行文本的缩进。 该属性值可以为像素值、百分比或相对值em，也可以为正值或负值，如果使用负值，那么首行会被缩进到左边。

现场演示： 案例9-02：文本缩进

1.文本样式 line-hight属性用来设置行间的距离（行高）。 1.4行高：line-height line-hight属性用来设置行间的距离（行高）。 line-height与font-size的计算值之差在CSS中成为“行间距”，将其值分为两半，分别加到一个文本行内容的顶部和底部，其中可以包含这些内容的最小框就是行框。

现场演示： 案例9-03：行高

1.文本样式 letter-spacing属性用来定义字符间的空白大小（字符间距）。 该属性定义了在文本字符框之间插入多少空间，由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔，normal就相当于值为0。

现场演示： 案例9-04：字母间隔

1.文本样式 text-align属性规定元素中文本的水平对齐方式。 该属性通过指定行框与某点对齐，来设置块级元素内文本的水平对齐方式。

现场演示： 案例9-05：水平对齐

1.文本样式 text-decoration属性规定添加到文本的修饰，修饰的颜色由“color”属性设置。

现场演示： 案例9-06：文本装饰

1.文本样式 text-transform属性用来对文本的大小写进行转换处理。 该属性会改变元素中的字母大小写，而不管源文本的大小写。 如果值为capitalize，则要对某些字母大写，但是并没有明确定义如何确定哪些字母要大写，这取决于浏览器如何识别出各个“词”。

现场演示： 案例9-07：字符转换

1.文本样式 white-space属性设置如何处理元素内的空白。 该属性声明建立布局过程中如何处理元素中的空白符，其中值pre-wrap和pre-line是CSS2.1中新增的。

现场演示： 案例9-08：元素空白处理

1.文本样式 word-spacing属性用来增加或减少单词（英文）间的空白（即字间隔）。 针对这个属性，“字”定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔，normal就等同于设置为0，允许指定负长度值，这会让字之间挤得更紧。

现场演示： 案例9-09：文字间隔

1.文本样式 1.11首字下沉：:first-letter first-letter属性用来实现文本首字下沉效果，此伪对象仅作用于块对象。

现场演示： 案例9-10：首字下沉

2.字体样式 文字是网页中最重要的设计元素之一，同时也是网站信息传递给用户的主要载体。 2.1什么是字体 文字是网页中最重要的设计元素之一，同时也是网站信息传递给用户的主要载体。 在网页设计中，字体是文字的外在形式特征，一些设计师为了凸显不同的设计效果，往往选择不同样式的字体来进行视觉效果设计。

2.字体样式 字体从商业角度划分，分为收费字体和免费字体两大类。 2.1什么是字体 字体从商业角度划分，分为收费字体和免费字体两大类。 例如在日常生活中常用到的方正系列字体，从方正字库官网（www.foundertype.com）可以看到，将方正字体分为：“免费字体”、“基础字体”和“精选字体”三类。 免费字体： 包括方正黑体、方正书宋、方正仿宋、方正楷体。

2.字体样式 字体从商业角度划分，分为收费字体和免费字体两大类。 基础字体： 精选字体： 2.1什么是字体 字体从商业角度划分，分为收费字体和免费字体两大类。 基础字体： 包括方正超粗黑体、方正宋黑体、方正大黑体、方正细黑一体、方正中等线体、方正细等线体、方正粗圆体、方正准圆体、方正细圆体、方正报宋体、方正宋三体、方正宋一体、方正大标宋体、方正小标宋体、方正彩云体、方正琥珀体、方正隶变体、方正隶书体、方正魏碑体、方正行楷体、方正姚体、方正综艺体。 精选字体： 包括免费字体、基础字体类以外的其它全部方正字体。如方正兰亭黑系列、博雅宋系列、正黑系列、倩体系列等。 注：基础字体和精选字体如需使用，需要购买方正字库授权。

2.字体样式 2.2属性

2.字体样式 font-family规定元素的字体系列。 font-family可以把多个字体名称作为一个“回退”机制。 在CSS中，有两种不同类型的字体系列。 通用字体系列：拥有相似外观的字体系统组合。 特定字体系列：具体的字体系列（如黑体、微软雅黑等）。 除了各种特定的字体系列外，CSS定义了5种通用字体系列，分别是Serif字体、Sans-serif字体、Monospace字体、Cursive字体、Fantasy字体。

现场演示： 案例9-11：字体系列

2.字体样式 font-size属性用来定义文本的大小。 该属性值可以为绝对值或相对值。 绝对值是将文本设置为指定的大小，此时不允许用户在所有浏览器中改变文本大小（不利于可用性），绝对大小在确定了输出的物理尺寸时很有用。 相对值是相对于周围的元素来设置大小，允许用户在浏览器改变文本大小。

现场演示： 案例9-12：字体大小

2.字体样式 2.5字体加粗：font-weight font-weight属性用来定义字体的粗细。

现场演示： 案例9-13：字体加粗

2.字体样式 font-style属性用来定义字体的风格，该属性值有三种：normal、italic、oblique。 italic：定义文本斜体显示。斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。 oblique：定义文本倾斜显示。倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

现场演示： 案例9-14：字体风格

3.文本效果 3.1 CSS3新增文本属性

3.文本效果 在网页开发过程中，可能会遇到内容溢出而导致网页变形的情况，通常采用以下两种方法解决： 3.2文本溢出：text-overflow 在网页开发过程中，可能会遇到内容溢出而导致网页变形的情况，通常采用以下两种方法解决： 通过JavaScript截取字符串。 网站后台程序截取一定的字符串将超出宽度的内容以省略号（…）显示。 上述的两种方法都有其不足之处，如中英文计算字符长度的问题，会导致截取字符串长度无法控制，从而降低程序的通用性。

3.文本效果 3.2文本溢出：text-overflow CSS3新增了text-ovreflow属性，使用该属性可快速地解决内容溢出问题。

现场演示： 案例9-15：溢出文本

3.文本效果 text-shadow属性用来给页面上的文字添加阴影效果。

现场演示： 案例9-16：文字阴影

3.文本效果 浏览器自身具有让文字自动换行的功能，在浏览器中显示文本的时候，会让文本在浏览器或div元素的右端自动实现换行。 3.4文本换行 浏览器自身具有让文字自动换行的功能，在浏览器中显示文本的时候，会让文本在浏览器或div元素的右端自动实现换行。 对于西方文字来说，浏览器会在半角空格或连字符的地方自动换行，而不会在单词中间突然换行，因此，浏览器不能够给较长的单词自动换行。 对于中文来说，浏览器可以在任何一个中文文字后面进行换行。

3.文本效果 3.4文本换行 在CSS3中，word-warp属性可以指定实现长单词与URL地址的自动换行。该属性值有两种：normal和break-word。 normal：默认值，表示只允许在断字点换行。 break-word：指定长单词或URL地址可以自动换行。 在CSS3中，word-break属性可以让浏览器实现在任意位置的换行。该属性值有三种：normal、keep-all和break-word。 normal：默认值，使用浏览器默认的换行规则。 break-all：允许在单词内换行。 keep-all：只能在半角空格或连字符处换行。

现场演示： 案例9-17：内容换行 案例9-18：词内换行

4.使用服务器端字体 在CSS3之前，页面文字所使用的字体，必须为用户计算机已经安装且能够正常使用的字体。 如果页面中指定了一种字体，而该字体用户计算机上没有安装，则该字体就无法正常显示。用户在浏览页面时，该字体会使用默认字体替代显示。

现场演示： 案例9-19：不使用服务器端字体 案例9-20：使用服务器端字体

5.案例：诗歌排版 CSS中文字样式的定义，实现了对页面中字体、段落的综合排版。 本案例通过中英文对照的诗歌排版，综合演示文字样式的属性，方便Web前端开发者了解使用文字排版。

现场演示： 案例9-21：诗歌排版

6.案例：使用服务器端字体实现网站图标 CSS3新增加了服务器字体的文字样式，通过服务器字体可以实现一些非常规字体在Web前端开发中的使用，极大的丰富了Web前端中字体的展示效果。 服务器字体的出现也为Web前端开发中图标的处理提供了新的方法，Web前端开发者可以通过使用服务器字体设置页面中的小图标，统一使用。

现场演示： 案例9-22：使用服务器端字体实现网站图标

Thanks.