【文档说明】HTML5+CSS3网页设计实例教程-第9章-文本与字体.ppt，共(57)页，1.296 MB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-2935.html

以下为本文档部分文字说明：

HTML5+CSS3网页设计实例教程第9章文本与字体第9章文本与字体本章概述本章的学习目标主要内容HTML5+CSS3网页设计实例教程第9章文本与字体第2页本章概述长期以来，Web页面排版是一个被很多人忽略的领域。尽管AdobePhotoshop或InDesign等编辑软件在字

体方面有很多改进，但浏览器仍然必须使用非常基本、有限的字体技术。但是，这些都随着CSS3的出现而发生了改变。在深入介绍CSS3提供的字体新工具之前，先要了解“字体”的含义和Web字体的概念。本章中，将介绍如何使用CSS来控制页面的样式风格，包括字体的颜色与大

小、线形的宽度与颜色，以及页面中各项的间距使用CSS3调整字体的不同方式。HTML5+CSS3网页设计实例教程第9章文本与字体第3页本章的学习目标了解字型和字体的概念掌握使用CSS控制文本基本方法了解Web字体的概念及发展历史如

何使用@font-face指令自定义字体掌握使用CSS3控制字体的不同方式HTML5+CSS3网页设计实例教程第9章文本与字体第4页主要内容9.1用CSS控制文本9.2CSS文本格式化9.3文本样式化实例9

.4使用@font-face自定义字体9.5使用CSS3调整字体9.6使用CSS3控制文本格式9.7本章小结HTML5+CSS3网页设计实例教程第9章文本与字体第5页9.1用CSS控制文本在CSS中，有一些属性可以用来控制文档中文

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

族，如Arial字体族。“字体”(font)是该字体族的一个特定成员，如Arial12号粗体。第6页serif字体sans-serif字体等宽字体三类字型HTML5+CSS3网页设计实例教程第9章文本与字体font-family属性font-family属性能够指定应用C

SS规则的元素中所有文本所应使用的字型。第7页通用字体名称通用字体名称字体类型示例serif带有衬线字体Timessans-serif无衬线字体Arialmonospace固定宽度字体Couriercursive模拟手写字体C

omicSansfantasy用于标题等的装饰字体ImpactHTML5+CSS3网页设计实例教程第9章文本与字体font-size属性font-size属性能够为字体设置尺寸。第8页浏览器中字体尺寸集合的效果HTML5+CSS3网页设计实例教程第9章文本与字体font-weig

ht属性大多数字体都有不同的变体，如粗体及斜体。第9页font-weight属性的各种取值在浏览器中的效果HTML5+CSS3网页设计实例教程第9章文本与字体font-style属性font-style属性能够指定字

体应为normal、italic还是oblique。这些也是font-style属性的值。第10页font-style属性值在浏览器中的效果HTML5+CSS3网页设计实例教程第9章文本与字体font-variant属性font-variant属性有两个可能的取值：normal及sma

ll-caps。小型大写字体(smallcapsfont)就像是一个较小版本的大写字母集合。第11页<span>元素内容以小型大写字母显示HTML5+CSS3网页设计实例教程第9章文本与字体第12页主要内容9.1用CSS控制文本9.2CSS文本格式化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指定文本是否应具有下划线、上划线或中划线text-indent指定从左侧边框起文本的缩进text-transform指定元素内容应全部为大写、小写，或

首字母大写text-shadow指定文本应具有投影letter-spacing控制字符间宽度(即印刷设计师熟知的“字距”(tracking))word-spacing控制单词间的距离white-space指定空格是否应该被压缩、保留或阻止换行direction指定文本行

文方向(类似于dir特性)HTML5+CSS3网页设计实例教程第9章文本与字体第14页color属性color属性能够指定文本的颜色。该属性最常见的取值是十六进制颜色代码或颜色名称。例如，下面的规则

会使元素内容变成红色。HTML5+CSS3网页设计实例教程第9章文本与字体第15页text-align属性text-align属性对于文本的功能与已经废弃的align特性类似。它会将文本在包含元素或浏览器窗口中进行对齐。text-align属性值在500像素宽的

表格中的工作效果HTML5+CSS3网页设计实例教程第9章文本与字体vertical-align属性vertical-align属性在使用行内元素时，尤其对于图片及文本片段，特别有用。它能够控制这些元素在其包含元素内的垂直定位，例如：第16页HTML5+CSS3网页设计实例教

程第9章文本与字体text-decoration属性第17页text-decoration属性的取值值作用underline在内容下方添加一条线overline在内容顶部之上添加一条线line-through添加一条从中间穿过内容的线

，如中划线文本。总体而言，此值应只用于指定标记为删除的文本none移除元素中的任何文本装饰HTML5+CSS3网页设计实例教程第9章文本与字体text-indent属性text-indent属性能够在元素中缩进文本的第一行。在下面

的例子中，第二个段落应用了该属性：第18页text-indent属性用于缩进第二段效果HTML5+CSS3网页设计实例教程第9章文本与字体text-shadow属性text-shadow属性应被用于创建投影，即文本背后的一个稍微偏移的深色版

本。该属性经常用于打印媒体，而它的受欢迎程度使它获得了属于自己的CSS属性。该属性的值相当复杂，因为它需要一个颜色参数以及三个长度参数：第19页HTML5+CSS3网页设计实例教程第9章文本与字体text-transform属性text-transform属性能够指定元素内容

的大小写形式。第20页text-transform属性的取值值作用none不发生变化capitalize大写每个单词的首字母uppercase将元素全部内容设置为大写lowercase将元素全部内容设置为小写HTML

5+CSS3网页设计实例教程第9章文本与字体letter-spacing属性letter-spacing属性控制着一种被印刷设计师称作“字距”(tracking)的东西：即字符间的空隙。松字距的字符之间有很大空间，而紧字距则

表示字符挤在一起。如没有设置字距，字符间则为该字体的正常间距。第21页使用字距在浏览器中的效果HTML5+CSS3网页设计实例教程第9章文本与字体word-spacing属性word-spacing属性设置单词间的距离，它的值应该是一个距离单位。在下面的例

子中，第一段中单词间为标准间距。第二段中单词间具有10像素的间距。而最后一段为普通间距基础上削减1像素。第22页word-spacing属性设置单词间距的效果HTML5+CSS3网页设计实例教程第9章文本与字体white-space属性浏览器会将两个或多个相邻的空

格压缩成一个空格，并且会将回车符也变为空格。white-space属性控制空格是否被保留，其提供的功能类似于HTML<pre>元素，将保留所有空格；或如nowrap特性，只有在显式告知时，文本才会进行换行。第23页white-space属性的取值值作用no

rmal遵循正常的空格压缩规则pre与HTML的<pre>元素相同，保留空格。但格式仍与该元素的设置相同(与<pre>元素不同，默认情况下不是以等宽字符显示)nowrap只有在显式使用<br>元素指定时才对文本进行换行，否则文本不会换行HTML5+C

SS3网页设计实例教程第9章文本与字体direction属性direction属性与dir特性很类似，用于指定文本应该流动的方向。第24页direction属性应用效果HTML5+CSS3网页设计实例教程第9章文本与字体文本伪类在学习有关文本的知识

时，有两个伪类可以有助于对文本的使用。这些伪类能够以与元素中其他部分不同的方式渲染元素中的第一个字符或第一行内容。first-letter伪类first-line伪类第25页HTML5+CSS3网页设计实例教程第9章文本与字体第26页主要内容9.1用CSS控制文本9.2CSS文本格式化9.3

文本样式化实例9.4使用@font-face自定义字体9.5使用CSS3调整字体9.6使用CSS3控制文本格式9.7本章小结HTML5+CSS3网页设计实例教程第9章文本与字体第27页9.3文本样式化实例CSS在Web中最常见的任务就是设置文本的样式。在

接下来的实例中，为示例网站设置文本样式。设置文本样式后的ExampleCafé网页效果HTML5+CSS3网页设计实例教程第9章文本与字体第28页主要内容9.1用CSS控制文本9.2CSS文本格式化9.3文本样式化实例9.4使用@font-face自

定义字体9.5使用CSS3调整字体9.6使用CSS3控制文本格式9.7本章小结HTML5+CSS3网页设计实例教程第9章文本与字体第29页9.4使用@font-face自定义字体@font-face是CSS3FontsModule中标准化的一个规则，最初在

2002年的草案中引入。此规则通过允许使用CSS规则在文档中直接嵌入字体，提供了Web中字体的极大控制能力。HTML5+CSS3网页设计实例教程第9章文本与字体Web字体Web字体是指，在@font-face规则中声明后，就可以使用的所有字体。所

有这些字体常常为Web的使用进行了优化，因此文件尺寸很小，并指定了别名，以便使用小字号时可以正确显示。第30页HTML5+CSS3网页设计实例教程第9章文本与字体字体格式、兼容性以及@font-face语法的起源1996年

建立CSSLevel2规范时，Adobe、Bitstream、Microsoft和其他厂商一起提出了@font-face，@font-face规则的声明如下：第31页HTML5+CSS3网页设计实例教程第9章文本与字体解析fontface语法:@font-face声明下面看看@font-fa

ce规则。在样式表中声明@font-face的方式如下：在这个规则中，字体系列声明了使用这个定制字体时用于引用它的名称。例如，在这个规则中指定的字体可以用如下方式使用：第32页HTML5+CSS3网页设计实例教程第9章文本与

字体@font-face的可靠语法学习了上一节，编写应用于所有浏览器的@font-face规则似乎并不是很困难。其实，这个任务其实很难。需要确保浏览器只下载指定的几个资源之一，这样页面会很快加载。有一种语法可以完成这

个任务。第33页HTML5+CSS3网页设计实例教程第9章文本与字体避免未样式化的文本闪屏(FOUT)Web字体的下载需要一定的时间，这些请求偶尔会超时(或者字体资源可能移动了，导致404错误)。在这段时间中

，浏览器必须确定是等待字体下载下来以显示需要的文本，还是不等待下载就显示文本，然后在字体下载完毕后更新显示。第34页HTML5+CSS3网页设计实例教程第9章文本与字体为网页添加自定义字体实例添加自定义字体是一种高

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

自定义字体9.5使用CSS3调整字体9.6使用CSS3控制文本格式9.7本章小结HTML5+CSS3网页设计实例教程第9章文本与字体9.5使用CSS3调整字体使用Web字体为所有浏览器提供最佳体验时，应确保使用正确的默认字体。首先：html{font-

size:100%;}这会确保在所有浏览器上，内容开始时使用标准的默认字体显示。在桌面上，这是16px。在移动设备上，字体的显示取决于分辨率和设备像素率。第37页HTML5+CSS3网页设计实例教程第9章文本与字体设置font-family指

定字体系列时，应确保在我们选择的字体不可用时，文本能以可读的格式显示出来。为此，可以设置备选的通用字体。CodeStyle有一个很好的字体库(www.codestyle.org/)，CSSFontStack(http://cssfontstack.com/)是另一个美观的字体库资

源。第38页HTML5+CSS3网页设计实例教程第9章文本与字体设置字号使用em单位设置字号。用em指定font-size时，得到的字号是em值与继承的字号之积。例如：h2元素的字号是32px。这是相对于基本字号设置字体大小的一种简单方法。如果增加基本字号，其他元素

都会自动调整。第39页HTML5+CSS3网页设计实例教程第9章文本与字体选择字形的粗细使用font-weight属性可以使文本显示得更粗，它有如下值：100到900：这些值构成了一个有序的序列，其中每个数字都表示至少与其前任一样粗的值。normal：字体的显示效果与font-weight

指定为400的字体一样。bold：字体的显示效果与font-weight指定为700的字体一样。bolder：字体比使用继承的font-weight值更粗。第40页HTML5+CSS3网页设计实例

教程第9章文本与字体选择正确的字宽使用font-stretch，可以从字体系列中选择正常、压缩、扩展的字体。第41页HTML5+CSS3网页设计实例教程第9章文本与字体设置垂直间距设置字体时，确保设置line-height属性。行高可以不带单位值，表示任

何选择器和从该选择器中继承样式的元素都把其行高计算为该无单位的值和当前字号的乘积。最好给大于1的line-height设置无单位的值，确保文本总是可读的。第42页HTML5+CSS3网页设计实例教程第9章文本与字体用网格设计字体要

在Web上显示美观的字体可以把字体设置为垂直韵律。建立排印垂直韵律，垂直间距的基本单位是行高。建立合适的行高，使其可应用于页面上的所有文本（包括标题、主体或边栏）是可靠的垂直韵律的关键，这会鼓励并引导读者继续阅读页面。有两种方式，一种是使用em

单位，另一种更简单的方法是使用像素单位。第43页HTML5+CSS3网页设计实例教程第9章文本与字体第44页主要内容9.1用CSS控制文本9.2CSS文本格式化9.3文本样式化实例9.4使用@font-face自定义字体9.5使用CSS3调整字体

9.6使用CSS3控制文本格式9.7本章小结HTML5+CSS3网页设计实例教程第9章文本与字体9.6使用CSS3控制文本格式控制文本溢出从基线开始垂直对齐文本控制单词中各个字符之间的空白调整字间距打断长单词控制空白和换行符打印断字控制文本

标点符号控制非拉丁Web字体的显示使用连字和其他OpenType字体功能第45页HTML5+CSS3网页设计实例教程第9章文本与字体控制文本溢出文本溢出到其块容器外(没有把溢出设置为可见)时，可以控制如何剪切溢出的文本。这个属性可以在如下情形下触发：块元素的white-sp

ace属性设置为nowrap单词长于块容器的宽度（针对水平书写的语言，例如英语）可以把文本设置为剪切，或者在前几个可见字符后显示省略号(…)。第46页HTML5+CSS3网页设计实例教程第9章文本与字体从基线开始垂直对齐文本vertical-al

ign属性允许相对于父元素设置内联元素的位置。注意它称为内联元素。默认情况下，内联元素(例如b、i、em、img、strong等)与父元素的基线对齐。但可以调整内联元素的位置，以匹配几个选项：baseline(默认)、sub、super、top、text-top、middle、bo

ttom、text-bottom、inherit。第47页HTML5+CSS3网页设计实例教程第9章文本与字体控制单词中各个字符之间的空白LetterSpacing允许设置文本中两个字符之间的距离。负值表示两个字符

的间距会收缩。第48页letter-spacing:5px的效果HTML5+CSS3网页设计实例教程第9章文本与字体调整字间距word-spacing指定两个字之间的距离。负值表示字间距的缩小。第49页word-spacing:20px的效果HTML5+CSS3网页

设计实例教程第9章文本与字体打断长单词如果句子包含一个不可打断的单词(例如"antidisestablishmentarianism")，即使它超出了容器的宽度，浏览器通常也会把它显示在同一行上。使用word-wrap:break-word可以告

诉浏览器，如果单词过长，超出了其容器的宽度，就打断它。第50页word-wrap:break-word的效果HTML5+CSS3网页设计实例教程第9章文本与字体控制空白和换行符white-space属性仅选择如下选项之一，给选定元素处

理文本中的空白：normal：根据需要压缩空白和换行符，以填满容器(且不显示换行符)。nowrap：压缩空白，但不打断行。pre：不压缩空白，仅在文本中有换行符或者生成的内容"\A"时打断行。pr

e-wrap：与pre相同，但如果显示换行符，就在需要时打断行，以填满容器。pre-line：与pre-wrap相同，但它也压缩空格和制表符。第51页HTML5+CSS3网页设计实例教程第9章文本与字体打印断字断字

：使用hyphens属性，可以控制连字符的显示。软断字：软断字(在HTML实体中表示为&shy;)用于告诉浏览器，单词可以在哪里打断。它不是一个CSS属性，但目前是在所有浏览器中实现断字的唯一方式。第52页HTML5+CSS

3网页设计实例教程第9章文本与字体控制文本标点符号控制文本引号字形悬挂标点符号第53页HTML5+CSS3网页设计实例教程第9章文本与字体控制非拉丁Web字体的显示CSS3引入了许多新属性，对非拉丁类型的样式化允许更大

的灵活性。下面介绍几个这样的属性。word-break：设置单词跨行显示时如何打断。text-emphasis：在CJK脚本中，重音用重音字符旁边的小符号表示。第54页HTML5+CSS3网页设计实例教程第9章文本与字体使用连字和其他OpenType字体功能

OpenType格式提供了其他许多字体功能，它们通常只能通过AdobeInDesign等应用程序使用。在CSS3中，这些功能现在可由Web开发人员使用。实现它时，可以在文本中使用连字、swash、smallcap和表格数字。其语法如下：第55页HTML5+C

SS3网页设计实例教程第9章文本与字体第56页主要内容9.1用CSS控制文本9.2CSS文本格式化9.3文本样式化实例9.4使用@font-face自定义字体9.5使用CSS3调整字体9.6使用CSS3控制文本格式9.7本章小结HTML5+CSS3网页设计实例教程第9章文本与字体9.7本

章小结本章介绍了用CSS控制文本与字体的许多功能，以及Web字体的简史。讨论了@font-face的演变过程，和在页面上调整字体的不同发送。本章还学习了如何使用相对和绝对单位设置字体，简要介绍了控制非拉丁字体的一些属性。使用CSS3调整

字体、字体大小、字体粗细、颜色以及其他属性，调整Web文本的外观等。第57页