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

font-size属性能够为字体设置尺寸。
浏览器中字体尺寸集合的效果
HTML5+CSS3网页设计实例教程 第9章 文本与字体
第8页
font-weight属性

大多数字体都有不同的变体，如粗体及斜 体。
font-weight属性的各种取值在浏览器中的效果
指定文本是否应具有下划线、上划线或中划线
指定从左侧边框起文本的缩进 指定元素内容应全部为大写、小写，或首字母大写 指定文本应具有投影 控制字符间宽度(即印刷设计师熟知的“字距”(tracking)) 控制单词间的距离 指定空格是否应该被压缩、保留或阻止换行 指定文本行文方向(类似于dir特性)
HTML5+CSS3网页设计实例教程
字型和字体
“字型”(typeface)是一个字体族，如 Arial字体族。 “字体”(font)是该字体族的一个特定成员 ，如Arial 12号粗体。

serif字体
HTML5+CSS3网页设计实例教程
sans-serif字体 三类字型
第9章 文本与字体
等宽字体
第6页
font-family属性
第30页
字体格式、兼容性以及@font-face语法 的起源

1996年建立CSS Level 2规范时，Adobe 、Bitstream、Microsoft和其他厂商一起 提出了@font-face，@font-face规则的声 明如下：
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第31页
第11页
主要内容
9.1 9.2 9.3 9.4 9.5 9.6 9.7 用CSS控制文本 CSS文本格式化 文本样式化实例 使用@font-face自定义字体 使用CSS3调整字体 使用CSS3控制文本格式 本章小结
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第12页
9.2 用CSS文本格式化
none
移除元素中的任何文本装饰
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第17页
text-indent属性

text-indent属性能够在元素中缩进文本的 第一行。在下面的例子中，第二个段落应 用了该属性：
text-indent属性用于缩进第二段效果
HTML5+CSS3网页设计实例教程 第9章 文本与字体
第9章 文本与字体
第23页
direction属性

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

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

color属性能够指定文本的颜色。该属性最常见的 取值是十六进制颜色代码或颜色名称。 例如，下面的规则会使元素内容变成红色。
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第14页
text-align属性

text-align属性对于文本的功能与已经废弃的 align特性类似。它会将文本在包含元素或浏览器 窗口中进行对齐。
第18页
text-shadow属性

text-shadow属性应被用于创建投影，即文 本背后的一个稍微偏移的深色版本。该属 性经常用于打印媒体，而它的受欢迎程度 使它获得了属于自己的CSS属性。该属性 的值相当复杂，因为它需要一个颜色参数 以及三个长度参数：
HTML5+CSS3网页设计实例教程
第9章 文本与字体

font-family属性能够指定应用CSS规则的 元素中所有文本所应使用的字型。
通用字体名称
通用字体名称 serif sans-serif monospace cursive fantasy 字体类型 带有衬线字体 无衬线字体 固定宽度字体 模拟手写字体 用于标题等的装饰字体 Times Arial Courier Comic Sans Impact 示 例
第19页
text-transform属性

text-transform属性能够指定元素内容的大 小写形式。
text-transform属性的取值
值 none 不发生变化 作 用
capitalize
uppercase lowercase
大写每个单词的首字母
将元素全部内容设置为大写 将元素全部内容设置为小写
使用字距在浏览器中的效果
HTML5+CSS3网页设计实例教程 第9章 文本与字体
第21页
word-spacing属性

word-spacing属性设置单词间的距离，它 的值应该是一个距离单位。在下面的例子 中，第一段中单词间为标准间距。第二段 中单词间具有10像素的间距。而最后一段 为普通间距基础上削减1像素。
white-space属性的取值
值 normal pre 遵循正常的空格压缩规则 与HTML的<pre>元素相同，保留空格。但格式仍与该元素的设置相同(与<pre>元 素不同，默认情况下不是以等宽字符显示) nowrap 只有在显式使用<br>元素指定时才对文本进行换行，否则文本不会换行 作 用
HTML5+CSS3网页设计实例教程
第9章 文本与字体
HTML5+CSS3网页设计实例教程
第2页
本章的学习目标
了解字型和字体的概念 掌握使用CSS控制文本基本方法 了解Web字体的概念及发展历史 如何使用@font-face指令自定义字体 掌握使用CSS3控制字体的不同方式

HTML5+CSS3网页设计实例教程
第9章 文本与字体
解析font face语法: @font-face声明

下面看看@font-face规则。在样式表中声明 @font-face的方式如下：

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

学习了上一节，编写应用于所有浏览器的 @font-face规则似乎并不是很困难。其实 ，这个任务其实很难。需要确保浏览器只 下载指定的几个资源之一，这样页面会很 快加载。有一种语法可以完成这个任务。
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第29页
Web字体

Web字体是指，在@font-face规则中声明 后，就可以使用的所有字体。所有这些字 体常常为Web的使用进行了优化，因此文 件尺寸很小，并指定了别名，以便使用小 字号时可以正确显示。
HTML5+CSS3网页设计实例教程
第9章 文本与字体
第9章 文本与字体
本章概述 本章的学习目标 主要内容
HTML5+CSS3网页设计实例教程
第9章 文本与字体
本章概述

长期以来，Web页面排版是一个被很多人忽略的 领域。尽管Adobe Photoshop 或InDesign等编 辑软件在字体方面有很多改进，但浏览器仍然必 须使用非常基本、有限的字体技术。但是，这些 都随着CSS3的出现而发生了改变。在深入介绍 CSS3提供的字体新工具之前，先要了解“字体 ”的含义和Web字体的概念。本章中，将介绍如 何使用CSS来控制页面的样式风格，包括字体的 颜色与大小、线形的宽度与颜色，以及页面中各 项的间距使用CSS3调整字体的不同方式。
文本格式化属性
属 性 指定文本颜色 指定文本在包含元素中的水平对齐 指定文本在包含元素中的垂直对齐 作 用 color text-align vertical-align
textdecoration text-indent text-transform text-shadow letter-spacing word-spacing white-space direction
第9章 文本与字体
第16页
text-decoration属性
text-decoration属性的取值