HTML5+CSS3网页设计实例教程-第9章-文本与字体.ppt

1、HTML5+CSS3网页设计实例教程第9章 文本与字体第第9章章 文本与字体文本与字体本章概述 本章的学习目标主要内容HTML5+CSS3网页设计实例教程第9章 文本与字体第2页本章概述本章概述l长期以来，长期以来，Web页面排版是一个被很多人忽略的页面排版是一个被很多人忽略的领域。尽管领域。尽管Adobe Photoshop 或或InDesign等编等编辑软件在字体方面有很多改进，但浏览器仍然必辑软件在字体方面有很多改进，但浏览器仍然必须使用非常基本、有限的字体技术。但是，这些须使用非常基本、有限的字体技术。但是，这些都随着都随着CSS3的出现而发生了改变。在深入介绍的出现而发生了改变。在深

2、入介绍CSS3提供的字体新工具之前，先要了解提供的字体新工具之前，先要了解“字体字体”的含义和的含义和Web字体的概念。本章中，将介绍如字体的概念。本章中，将介绍如何使用何使用CSS来控制页面的样式风格，包括字体的来控制页面的样式风格，包括字体的颜色与大小、线形的宽度与颜色，以及页面中各颜色与大小、线形的宽度与颜色，以及页面中各项的间距使用项的间距使用CSS3调整字体的不同方式。调整字体的不同方式。HTML5+CSS3网页设计实例教程第9章 文本与字体第3页本章的学习目标本章的学习目标l了解字型和字体的概念了解字型和字体的概念l掌握使用掌握使用CSS控制文本基本方法控制文本基本方法l了解了解W

3、eb字体的概念及发展历史字体的概念及发展历史l如何使用如何使用font-face指令自定义字体指令自定义字体l掌握使用掌握使用CSS3控制字体的不同方式控制字体的不同方式HTML5+CSS3网页设计实例教程第9章 文本与字体第4页主要内容主要内容9.1 用用CSS控制文本控制文本9.2 CSS文本格式化文本格式化9.3 文本样式化实例文本样式化实例9.4 使用使用font-face自定义字体自定义字体9.5 使用使用CSS3调整字体调整字体9.6 使用使用CSS3控制文本格式控制文本格式9.7 本章小结本章小结HTML5+CSS3网页设计实例教程第9章 文本与字体第5页9.1 用用CSS控制文

4、本控制文本l在在CSS中，有一些属性可以用来控制文档中文本的中，有一些属性可以用来控制文档中文本的外观。这些属性分成两组：外观。这些属性分成两组：l直接影响字体及其外观的属性（包括使用的字型，直接影响字体及其外观的属性（包括使用的字型，是否为正体、粗体或斜体，以及文本尺寸等）。是否为正体、粗体或斜体，以及文本尺寸等）。l具有的效果与所用字体无关的属性，包括文本颜色具有的效果与所用字体无关的属性，包括文本颜色、单词或字母间的距离等。、单词或字母间的距离等。HTML5+CSS3网页设计实例教程第9章 文本与字体字型和字体字型和字体l“字型字型”(typeface)是一个字体族，如是一个字体族，如A

5、rial字体族。字体族。l“字体字体”(font)是该字体族的一个特定成员是该字体族的一个特定成员，如，如Arial 12号粗体。号粗体。第6页serif字体 sans-serif字体 等宽字体三类字型HTML5+CSS3网页设计实例教程第9章 文本与字体font-family属性属性lfont-family属性能够指定应用属性能够指定应用CSS规则的规则的元素中所有文本所应使用的字型。元素中所有文本所应使用的字型。第7页通用字体名称通用字体名称字 体 类 型示 例serif带有衬线字体Times sans-serif无衬线字体Arialmonospace固定宽度字体Couriercursiv

6、e模拟手写字体Comic Sansfantasy用于标题等的装饰字体ImpactHTML5+CSS3网页设计实例教程第9章 文本与字体font-size属性属性lfont-size属性能够为字体设置尺寸。属性能够为字体设置尺寸。第8页浏览器中字体尺寸集合的效果HTML5+CSS3网页设计实例教程第9章 文本与字体font-weight属性属性l大多数字体都有不同的变体，如粗体及斜大多数字体都有不同的变体，如粗体及斜体。体。第9页font-weight属性的各种取值在浏览器中的效果HTML5+CSS3网页设计实例教程第9章 文本与字体font-style属性属性lfont-style属性能够指定

7、字体应为属性能够指定字体应为normal、italic还是还是oblique。这些也是。这些也是font-style属属性的值。性的值。第10页font-style属性值在浏览器中的效果HTML5+CSS3网页设计实例教程第9章 文本与字体font-variant属性属性lfont-variant属性有两个可能的取值：属性有两个可能的取值：normal及及small-caps。小型大写字体。小型大写字体(small caps font)就像是一个较小版本的就像是一个较小版本的大写字母集合。大写字母集合。第11页元素内容以小型大写字母显示HTML5+CSS3网页设计实例教程第9章 文本与字体第1

8、2页主要内容主要内容9.1 用用CSS控制文本控制文本9.2 CSS文本格式化文本格式化9.3 文本样式化实例文本样式化实例9.4 使用使用font-face自定义字体自定义字体9.5 使用使用CSS3调整字体调整字体9.6 使用使用CSS3控制文本格式控制文本格式9.7 本章小结本章小结HTML5+CSS3网页设计实例教程第9章 文本与字体第13页9.2 用用CSS文本格式化文本格式化文本格式化属性属 性作 用color指定文本颜色text-align指定文本在包含元素中的水平对齐vertical-align指定文本在包含元素中的垂直对齐text-decoration指定文本是否应具有下划线

9、、上划线或中划线text-indent指定从左侧边框起文本的缩进text-transform指定元素内容应全部为大写、小写，或首字母大写text-shadow指定文本应具有投影letter-spacing控制字符间宽度(即印刷设计师熟知的“字距”(tracking)word-spacing控制单词间的距离white-space指定空格是否应该被压缩、保留或阻止换行direction指定文本行文方向(类似于dir特性)HTML5+CSS3网页设计实例教程第9章 文本与字体第14页color属性属性lcolor属性能够指定文本的颜色。该属性最常见的属性能够指定文本的颜色。该属性最常见的取值是十六进

10、制颜色代码或颜色名称。取值是十六进制颜色代码或颜色名称。l例如，下面的规则会使元素内容变成红色。例如，下面的规则会使元素内容变成红色。HTML5+CSS3网页设计实例教程第9章 文本与字体第15页text-align属性属性ltext-align属性对于文本的功能与已经废弃的属性对于文本的功能与已经废弃的align特性类似。它会将文本在包含元素或浏览器特性类似。它会将文本在包含元素或浏览器窗口中进行对齐。窗口中进行对齐。text-align属性值在500像素宽的表格中的工作效果HTML5+CSS3网页设计实例教程第9章 文本与字体vertical-align属性属性lvertical-alig

11、n属性在使用行内元素时，尤属性在使用行内元素时，尤其对于图片及文本片段，特别有用。它能其对于图片及文本片段，特别有用。它能够控制这些元素在其包含元素内的垂直定够控制这些元素在其包含元素内的垂直定位，例如：位，例如：第16页HTML5+CSS3网页设计实例教程第9章 文本与字体text-decoration属性属性第17页text-decoration属性的取值值作 用underline在内容下方添加一条线overline在内容顶部之上添加一条线line-through添加一条从中间穿过内容的线，如中划线文本。总体而言，此值应只用于指定标记为删除的文本none移除元素中的任何文本装饰HTML5+

12、CSS3网页设计实例教程第9章 文本与字体text-indent属性属性ltext-indent属性能够在元素中缩进文本的属性能够在元素中缩进文本的第一行。在下面的例子中，第二个段落应第一行。在下面的例子中，第二个段落应用了该属性：用了该属性：第18页text-indent属性用于缩进第二段效果HTML5+CSS3网页设计实例教程第9章 文本与字体text-shadow属性属性ltext-shadow属性应被用于创建投影，即文属性应被用于创建投影，即文本背后的一个稍微偏移的深色版本。该属本背后的一个稍微偏移的深色版本。该属性经常用于打印媒体，而它的受欢迎程度性经常用于打印媒体，而它的受欢迎程度

13、使它获得了属于自己的使它获得了属于自己的CSS属性。该属性属性。该属性的值相当复杂，因为它需要一个颜色参数的值相当复杂，因为它需要一个颜色参数以及三个长度参数：以及三个长度参数：第19页HTML5+CSS3网页设计实例教程第9章 文本与字体text-transform属性属性ltext-transform属性能够指定元素内容的大属性能够指定元素内容的大小写形式。小写形式。第20页text-transform属性的取值值作 用none不发生变化capitalize大写每个单词的首字母uppercase将元素全部内容设置为大写lowercase将元素全部内容设置为小写HTML5+CSS3网页设计实

14、例教程第9章 文本与字体letter-spacing属性属性lletter-spacing属性控制着一种被印刷设计属性控制着一种被印刷设计师称作师称作“字距字距”(tracking)的东西：即字符的东西：即字符间的空隙。松字距的字符之间有很大空间，间的空隙。松字距的字符之间有很大空间，而紧字距则表示字符挤在一起。如没有设置而紧字距则表示字符挤在一起。如没有设置字距，字符间则为该字体的正常间距。字距，字符间则为该字体的正常间距。第21页使用字距在浏览器中的效果HTML5+CSS3网页设计实例教程第9章 文本与字体word-spacing属性属性lword-spacing属性设置单词间的距离，它属

15、性设置单词间的距离，它的值应该是一个距离单位。在下面的例子的值应该是一个距离单位。在下面的例子中，第一段中单词间为标准间距。第二段中，第一段中单词间为标准间距。第二段中单词间具有中单词间具有10像素的间距。而最后一段像素的间距。而最后一段为普通间距基础上削减为普通间距基础上削减1像素。像素。第22页word-spacing属性设置单词间距的效果HTML5+CSS3网页设计实例教程第9章 文本与字体white-space属性属性l浏览器会将两个或多个相邻的空格压缩成浏览器会将两个或多个相邻的空格压缩成一个空格，并且会将回车符也变为空格。一个空格，并且会将回车符也变为空格。white-space属

16、性控制空格是否被保留，其属性控制空格是否被保留，其提供的功能类似于提供的功能类似于HTML元素，将保元素，将保留所有空格；或如留所有空格；或如nowrap特性，只有在显特性，只有在显式告知时，文本才会进行换行。式告知时，文本才会进行换行。第23页 white-space属性的取值值作 用normal遵循正常的空格压缩规则pre与HTML的元素相同，保留空格。但格式仍与该元素的设置相同(与元素不同，默认情况下不是以等宽字符显示)nowrap只有在显式使用元素指定时才对文本进行换行，否则文本不会换行HTML5+CSS3网页设计实例教程第9章 文本与字体direction属性属性ldirection

17、属性与属性与dir特性很类似，用于指定特性很类似，用于指定文本应该流动的方向。文本应该流动的方向。第24页direction属性应用效果HTML5+CSS3网页设计实例教程第9章 文本与字体文本伪类文本伪类l在学习有关文本的知识时，有两个伪类可在学习有关文本的知识时，有两个伪类可以有助于对文本的使用。这些伪类能够以以有助于对文本的使用。这些伪类能够以与元素中其他部分不同的方式渲染元素中与元素中其他部分不同的方式渲染元素中的第一个字符或第一行内容。的第一个字符或第一行内容。lfirst-letter伪类伪类lfirst-line伪类伪类第25页HTML5+CSS3网页设计实例教程第9章 文本与字

18、体第26页主要内容主要内容9.1 用用CSS控制文本控制文本9.2 CSS文本格式化文本格式化9.3 文本样式化实例文本样式化实例9.4 使用使用font-face自定义字体自定义字体9.5 使用使用CSS3调整字体调整字体9.6 使用使用CSS3控制文本格式控制文本格式9.7 本章小结本章小结HTML5+CSS3网页设计实例教程第9章 文本与字体第27页9.3 文本样式化实例文本样式化实例lCSS在在Web中最常见的任务就是设置文本的中最常见的任务就是设置文本的样式。在接下来的实例中，为示例网站设置样式。在接下来的实例中，为示例网站设置文本样式。文本样式。设置文本样式后的Example Ca

19、f网页效果HTML5+CSS3网页设计实例教程第9章 文本与字体第28页主要内容主要内容9.1 用用CSS控制文本控制文本9.2 CSS文本格式化文本格式化9.3 文本样式化实例文本样式化实例9.4 使用使用font-face自定义字体自定义字体9.5 使用使用CSS3调整字体调整字体9.6 使用使用CSS3控制文本格式控制文本格式9.7 本章小结本章小结HTML5+CSS3网页设计实例教程第9章 文本与字体第29页9.4 使用使用font-face自定义字体自定义字体lfont-face是是CSS3 Fonts Module中标准中标准化的一个规则，最初在化的一个规则，最初在2002年的草案

20、中引年的草案中引入。此规则通过允许使用入。此规则通过允许使用CSS规则在文档规则在文档中直接嵌入字体，提供了中直接嵌入字体，提供了Web中字体的极中字体的极大控制能力。大控制能力。HTML5+CSS3网页设计实例教程第9章 文本与字体Web字体字体lWeb字体是指，在字体是指，在font-face规则中声明规则中声明后，就可以使用的所有字体。所有这些字后，就可以使用的所有字体。所有这些字体常常为体常常为Web的使用进行了优化，因此文的使用进行了优化，因此文件尺寸很小，并指定了别名，以便使用小件尺寸很小，并指定了别名，以便使用小字号时可以正确显示。字号时可以正确显示。第30页HTML5+CSS3

21、网页设计实例教程第9章 文本与字体字体格式、兼容性以及字体格式、兼容性以及font-face语法语法的起源的起源l1996年建立年建立CSS Level 2规范时，规范时，Adobe、Bitstream、Microsoft和其他厂商一起和其他厂商一起提出了提出了font-face，font-face规则的声规则的声明如下：明如下：第31页HTML5+CSS3网页设计实例教程第9章 文本与字体解析解析font face语法语法:font-face声明声明l下面看看下面看看font-face规则。在样式表中声明规则。在样式表中声明font-face的方式如下：的方式如下：l在这个规则中，字体系列声

22、明了使用这个定在这个规则中，字体系列声明了使用这个定制字体时用于引用它的名称。例如，在这个制字体时用于引用它的名称。例如，在这个规则中指定的字体可以用如下方式使用：规则中指定的字体可以用如下方式使用：第32页HTML5+CSS3网页设计实例教程第9章 文本与字体font-face的可靠语法的可靠语法l学习了上一节，编写应用于所有浏览器的学习了上一节，编写应用于所有浏览器的font-face规则似乎并不是很困难。其实规则似乎并不是很困难。其实，这个任务其实很难。需要确保浏览器只，这个任务其实很难。需要确保浏览器只下载指定的几个资源之一，这样页面会很下载指定的几个资源之一，这样页面会很快加载。有一

23、种语法可以完成这个任务。快加载。有一种语法可以完成这个任务。第33页HTML5+CSS3网页设计实例教程第9章 文本与字体避免未样式化的文本闪屏避免未样式化的文本闪屏(FOUT)lWeb字体的下载需要一定的时间，这些请字体的下载需要一定的时间，这些请求偶尔会超时求偶尔会超时(或者字体资源可能移动了，或者字体资源可能移动了，导致导致404错误错误)。在这段时间中，浏览器必。在这段时间中，浏览器必须确定是等待字体下载下来以显示需要的须确定是等待字体下载下来以显示需要的文本，还是不等待下载就显示文本，然后文本，还是不等待下载就显示文本，然后在字体下载完毕后更新显示。在字体下载完毕后更新显示。第34页

24、HTML5+CSS3网页设计实例教程第9章 文本与字体为网页添加自定义字体实例为网页添加自定义字体实例l添加自定义字体是一种高级的添加自定义字体是一种高级的CSS特性，特性，下面通过实例说明这种有些复杂的添加自下面通过实例说明这种有些复杂的添加自定义字体的方式。定义字体的方式。第35页示例中的首页效果HTML5+CSS3网页设计实例教程第9章 文本与字体第36页主要内容主要内容9.1 用用CSS控制文本控制文本9.2 CSS文本格式化文本格式化9.3 文本样式化实例文本样式化实例9.4 使用使用font-face自定义字体自定义字体9.5 使用使用CSS3调整字体调整字体9.6 使用使用CSS

25、3控制文本格式控制文本格式9.7 本章小结本章小结HTML5+CSS3网页设计实例教程第9章 文本与字体9.5 使用使用CSS3调整字体调整字体l使用使用Web字体为所有浏览器提供最佳体验字体为所有浏览器提供最佳体验时，应确保使用正确的默认字体。首先：时，应确保使用正确的默认字体。首先：html font-size:100%;l这会确保在所有浏览器上，内容开始时使这会确保在所有浏览器上，内容开始时使用标准的默认字体显示。在桌面上，这是用标准的默认字体显示。在桌面上，这是16px。在移动设备上，字体的显示取决于。在移动设备上，字体的显示取决于分辨率和设备像素率。分辨率和设备像素率。第37页HTM

26、L5+CSS3网页设计实例教程第9章 文本与字体设置设置font-familyl指定字体系列时，应确保在我们选择的字指定字体系列时，应确保在我们选择的字体不可用时，文本能以可读的格式显示出体不可用时，文本能以可读的格式显示出来。为此，可以设置备选的通用字体。来。为此，可以设置备选的通用字体。Code Style有一个很好的字体库有一个很好的字体库(www.codestyle.org/)，CSS Font Stack(http:/ 文本与字体设置字号设置字号l使用使用em单位设置字号。用单位设置字号。用em指定指定font-size时，得到的字号是时，得到的字号是em值与继承的字号值与继承的字号

27、之积。例如：之积。例如：lh2元素的字号是元素的字号是32px。这是相对于基本字。这是相对于基本字号设置字体大小的一种简单方法。如果增号设置字体大小的一种简单方法。如果增加基本字号，其他元素都会自动调整。加基本字号，其他元素都会自动调整。第39页HTML5+CSS3网页设计实例教程第9章 文本与字体选择字形的粗细选择字形的粗细l使用使用font-weight属性可以使文本显示得更属性可以使文本显示得更粗，它有如下值：粗，它有如下值：l100到到900：这些值构成了一个有序的序列，其中：这些值构成了一个有序的序列，其中每个数字都表示至少与其前任一样粗的值。每个数字都表示至少与其前任一样粗的值。l

28、normal：字体的显示效果与：字体的显示效果与font-weight指定为指定为400的字体一样。的字体一样。lbold：字体的显示效果与：字体的显示效果与font-weight指定为指定为700的字体一样。的字体一样。lbolder：字体比使用继承的：字体比使用继承的font-weight值更粗。值更粗。第40页HTML5+CSS3网页设计实例教程第9章 文本与字体选择正确的字宽选择正确的字宽l使用使用font-stretch，可以从字体系列中选择，可以从字体系列中选择正常、压缩、扩展的字体。正常、压缩、扩展的字体。第41页HTML5+CSS3网页设计实例教程第9章 文本与字体设置垂直间距

29、设置垂直间距l设置字体时，确保设置设置字体时，确保设置line-height属性。属性。行高可以不带单位值，表示任何选择器和行高可以不带单位值，表示任何选择器和从该选择器中继承样式的元素都把其行高从该选择器中继承样式的元素都把其行高计算为该无单位的值和当前字号的乘积。计算为该无单位的值和当前字号的乘积。最好给大于最好给大于1的的line-height设置无单位的值设置无单位的值，确保文本总是可读的。，确保文本总是可读的。第42页HTML5+CSS3网页设计实例教程第9章 文本与字体用网格设计字体用网格设计字体l要在要在Web上显示美观的字体可以把字体设置上显示美观的字体可以把字体设置为垂直韵律

30、。建立排印垂直韵律，垂直间距为垂直韵律。建立排印垂直韵律，垂直间距的基本单位是行高。建立合适的行高，使其的基本单位是行高。建立合适的行高，使其可应用于页面上的所有文本（包括标题、主可应用于页面上的所有文本（包括标题、主体或边栏）是可靠的垂直韵律的关键，这会体或边栏）是可靠的垂直韵律的关键，这会鼓励并引导读者继续阅读页面。鼓励并引导读者继续阅读页面。l有两种方式，一种是使用有两种方式，一种是使用em单位，另一种单位，另一种更简单的方法是使用像素单位。更简单的方法是使用像素单位。第43页HTML5+CSS3网页设计实例教程第9章 文本与字体第44页主要内容主要内容9.1 用用CSS控制文本控制文本

31、9.2 CSS文本格式化文本格式化9.3 文本样式化实例文本样式化实例9.4 使用使用font-face自定义字体自定义字体9.5 使用使用CSS3调整字体调整字体9.6 使用使用CSS3控制文本格式控制文本格式9.7 本章小结本章小结HTML5+CSS3网页设计实例教程第9章 文本与字体9.6 使用使用CSS3控制文本格式控制文本格式l控制文本溢出控制文本溢出l从基线开始垂直对齐文本从基线开始垂直对齐文本l控制单词中各个字符之间的空白控制单词中各个字符之间的空白l调整字间距调整字间距l打断长单词打断长单词l控制空白和换行符控制空白和换行符l打印断字打印断字l控制文本标点符号控制文本标点符号l

32、控制非拉丁控制非拉丁Web字体的显示字体的显示l使用连字和其他使用连字和其他OpenType字体功能字体功能第45页HTML5+CSS3网页设计实例教程第9章 文本与字体控制文本溢出控制文本溢出l文本溢出到其块容器外文本溢出到其块容器外(没有把溢出设置为没有把溢出设置为可见可见)时，可以控制如何剪切溢出的文本。时，可以控制如何剪切溢出的文本。这个属性可以在如下情形下触发：这个属性可以在如下情形下触发：l块元素的块元素的white-space属性设置为属性设置为nowrapl单词长于块容器的宽度（针对水平书写的单词长于块容器的宽度（针对水平书写的语言，例如英语）语言，例如英语）l可以把文本设置为

33、剪切，或者在前几个可可以把文本设置为剪切，或者在前几个可见字符后显示省略号见字符后显示省略号()。第46页HTML5+CSS3网页设计实例教程第9章 文本与字体从基线开始垂直对齐文本从基线开始垂直对齐文本lvertical-align属性允许相对于父元素设置属性允许相对于父元素设置内联元素的位置。注意它称为内联元素。内联元素的位置。注意它称为内联元素。默认情况下，内联元素默认情况下，内联元素(例如例如b、i、em、img、strong等等)与父元素的基线对齐。但与父元素的基线对齐。但可以调整内联元素的位置，以匹配几个选可以调整内联元素的位置，以匹配几个选项：项：baseline(默认默认)、s

34、ub、super、top、text-top、middle、bottom、text-bottom、inherit。第47页HTML5+CSS3网页设计实例教程第9章 文本与字体控制单词中各个字符之间的空白控制单词中各个字符之间的空白lLetter Spacing允许设置文本中两个字符允许设置文本中两个字符之间的距离。负值表示两个字符的间距会之间的距离。负值表示两个字符的间距会收缩。收缩。第48页 letter-spacing:5px的效果HTML5+CSS3网页设计实例教程第9章 文本与字体调整字间距调整字间距lword-spacing指定两个字之间的距离。负指定两个字之间的距离。负值表示字间距

35、的缩小。值表示字间距的缩小。第49页word-spacing:20px的效果HTML5+CSS3网页设计实例教程第9章 文本与字体打断长单词打断长单词l如果句子包含一个不可打断的单词如果句子包含一个不可打断的单词(例如例如antidisestablishmentarianism)，即使，即使它超出了容器的宽度，浏览器通常也会把它超出了容器的宽度，浏览器通常也会把它显示在同一行上。使用它显示在同一行上。使用word-wrap:break-word可以告诉浏览器，如果单词过可以告诉浏览器，如果单词过长，超出了其容器的宽度，就打断它。长，超出了其容器的宽度，就打断它。第50页word-wrap:br

36、eak-word的效果HTML5+CSS3网页设计实例教程第9章 文本与字体控制空白和换行符控制空白和换行符lwhite-space属性仅选择如下选项之一，给选定元素处理属性仅选择如下选项之一，给选定元素处理文本中的空白：文本中的空白：lnormal：根据需要压缩空白和换行符，以填满容器：根据需要压缩空白和换行符，以填满容器(且不且不显示换行符显示换行符)。lnowrap：压缩空白，但不打断行。：压缩空白，但不打断行。lpre：不压缩空白，仅在文本中有换行符或者生成的内容：不压缩空白，仅在文本中有换行符或者生成的内容A时打断行。时打断行。lpre-wrap：与：与pre相同，但如果显示换行符，

37、就在需要时相同，但如果显示换行符，就在需要时打断行，以填满容器。打断行，以填满容器。lpre-line：与：与pre-wrap相同，但它也压缩空格和制表符。相同，但它也压缩空格和制表符。第51页HTML5+CSS3网页设计实例教程第9章 文本与字体打印断字打印断字l断字：使用断字：使用hyphens属性，可以控制连字属性，可以控制连字符的显示。符的显示。l软断字：软断字软断字：软断字(在在HTML实体中表示为实体中表示为­)用于告诉浏览器，单词可以在哪里用于告诉浏览器，单词可以在哪里打断。它不是一个打断。它不是一个CSS属性，但目前是在属性，但目前是在所有浏览器中实现断字的唯一方式。所

38、有浏览器中实现断字的唯一方式。第52页HTML5+CSS3网页设计实例教程第9章 文本与字体控制文本标点符号控制文本标点符号l 控制文本引号字形控制文本引号字形l悬挂标点符号悬挂标点符号第53页HTML5+CSS3网页设计实例教程第9章 文本与字体控制非拉丁控制非拉丁Web字体的显示字体的显示lCSS3引入了许多新属性，对非拉丁类型的引入了许多新属性，对非拉丁类型的样式化允许更大的灵活性。下面介绍几个样式化允许更大的灵活性。下面介绍几个这样的属性。这样的属性。lword-break：设置单词跨行显示时如何打：设置单词跨行显示时如何打断。断。ltext-emphasis：在：在CJK脚本中，重音

39、用重脚本中，重音用重音字符旁边的小符号表示。音字符旁边的小符号表示。第54页HTML5+CSS3网页设计实例教程第9章 文本与字体使用连字和其他使用连字和其他OpenType字体功能字体功能lOpenType格式提供了其他许多字体功能，格式提供了其他许多字体功能，它们通常只能通过它们通常只能通过Adobe InDesign等应用等应用程序使用。在程序使用。在CSS3中，这些功能现在可由中，这些功能现在可由Web开发人员使用。实现它时，可以在文开发人员使用。实现它时，可以在文本中使用连字、本中使用连字、swash、small cap和表格和表格数字。其语法如下：数字。其语法如下：第55页HTML

40、5+CSS3网页设计实例教程第9章 文本与字体第56页主要内容主要内容9.1 用用CSS控制文本控制文本9.2 CSS文本格式化文本格式化9.3 文本样式化实例文本样式化实例9.4 使用使用font-face自定义字体自定义字体9.5 使用使用CSS3调整字体调整字体9.6 使用使用CSS3控制文本格式控制文本格式9.7 本章小结本章小结HTML5+CSS3网页设计实例教程第9章 文本与字体9.7 本章小结本章小结l本章介绍了用本章介绍了用CSS控制文本与字体的许多控制文本与字体的许多功能，以及功能，以及Web字体的简史。讨论了字体的简史。讨论了font-face的演变过程，和在页面上调整的演变过程，和在页面上调整字体的不同发送。本章还学习了如何使用字体的不同发送。本章还学习了如何使用相对和绝对单位设置字体，简要介绍了控相对和绝对单位设置字体，简要介绍了控制非拉丁字体的一些属性。使用制非拉丁字体的一些属性。使用CSS3调整调整字体、字体大小、字体粗细、颜色以及其字体、字体大小、字体粗细、颜色以及其他属性，调整他属性，调整Web文本的外观等。文本的外观等。第57页