29. 使用 CSS 设置文本样式

详细资料: 发布于 2012年9月18日; 点击数：4472

序言

由于 Web 是 HTML 文档的集合体——有些是动态的，有些是静态的，有些是功能性的——它们的排版所遵循的惯例来自于我们的最佳参考对象：六个世纪的印刷传统。这种传统包括了排印。但是网络是一个全新而且截然不同的媒体，对于网站的排版来说，我们需要对印刷设计具备一种截然不同的技能组合，而且其受到的限制也更多。

本文建立在本系列教程前面那些课程的知识基础上，为你提供了一个用CSS来对文本进行有效地样式化的详细指南。下面链接有许多范例，这些范例演示了我们所讨论的技术——你可以点此下载第 29 篇文章的所有示例。

本文结构如下：

Web 排版回顾
- 对比度
- 可辨认性和易读性
CSS 字体属性：改变你的文本外观
CSS 文本和对齐属性：排字修改
总结
延伸阅读
练习题

Web 排版回顾

在网络上，设计者对页面外观的控制比在其它媒体上要少得多。这种情况在涉及到文件的大小，分辨率和对比度之类的画布属性的时候显得尤为明显。Web排版的质量还会受到一些严格的限制，这一点在关于排版的基础原则的文章中已经讨论过了。

其它值得一提的概念还有对比度, 可辨认性和易读性——下面我们就来看看这些概念。

对比度

通过类型对比度，我们就可以很容易地将文章从空白和相邻文章中区别出来，类型对比度受到许多因素的影响，比如亮度、颜色、大小和组合。之所以在这里提到对比度，是为了指出低对比度的文本应该设置成所允许的最大尺寸。

可辨认性和易读性

在设计情景中，通过可辨认性，我们可以轻而易举地对一个文本段落进行特定信息片断扫描，而通过易读性，则使得我们能够很容易地理解一篇文章。表1列出了提高这二者之中某一个性质的质量的设计方法。

表1：可辨认性和可读性特征
对象	文本行长度	中缝(文本列之间的间距) & 行间距	字体类型选择	对齐
易读性	中等	增大	serif	右侧不齐 [左对齐]
可辨认性	短	一般	sans-serif	不固定，通常是两端对齐

在下一篇文章——CSS 布局模式中我们将讨论最佳列宽。

CSS 字体属性：改变你的文本外观

排版涉及到针对文本的操作，这种操作与组合以及单个字母和词语的外观有关。后面这一类任务是由 CSS 字体属性处理的，我们将在下面进行讨论。

字体大小和单位类型选择

由于字号的变化比起字体的变化来说，更能影响页面外观，而用户代理样式表通常都能很好地处理字体的变形，因此对于文本来说，最基本的属性就是 font-size。在一条规则中应用该属性的时候，它后面会跟着一个属性值，这个值用某种单位指定了字体的大小，也有时是用关键字来表示大小的（比如 small 或 medium）。

这是怎样做到的

作为样式表中最重要的声明，font-size 声明的格式是像这样的：

body {…
	font-size: 14px;
	…}

由于继承的缘故，HTML 文档中所有的字号规格都是基于 body 部分的字号声明的，不管该声明是在浏览器的样式表里面还是你的样式表里面。

浏览器默认的 16 像素对你的正文字体大小来说是个不错的起点，但大多数访问者都可以轻松阅读更小的字体。因此，许多设计者选择了更小的规格——大约 11-14 像素。

如果我们用相对值来指定字体大小，或者用关键字来为一个元素指定字体大小，而这个元素的父对象的字体大小不是关键字的话，字号设置就会通过继承来实现。

CSS 文本属性中可以用哪些类型的单位？

在样式表的规则里，最常见的文本字体大小的单位是像素（px），字体高（em，将在下面解释），百分比（%），以及点数（pt）。表 2 中说明了使用这些单位来调整文本大小的方式。

表 2：方便设置文本大小的 CSS 单位
单位	定义 1	使用
CSS 字体高	Δ = x	`1.333em`
关键字	UA 定义 2	`large`, &c.
百分比	Δ = x ÷ 100	`133.3%`
像素	绝对单位	`16px`
点数	绝对单位	`12pt`

1 Δ 是字号对继承值的变化率。

2 只能继承最近的那个非关键字的字体大小值。

其它的可用单位类型还有大小关键字，Picas1pica 正好等于 12 个点数），以及 exes（ex）。CSS2 支持的其它许多单位类型也是可用的，但在进行文本处理时很少用到。

这么多不同的单位类型的用途是什么？

正如表 2 中所指出的那样，存在着相对和绝对大小单位。关键字则两个性质都有，绝对大小是相对于其它文本而言的，而相对大小则与它们所继承的非关键字值有关。它们的最优使用方法如下：

绝对大小（px，或者像pt之类的标准化单位）最好应用在不会随文档画布属性改变的布局中——也就是所谓的“固定”、“静态”或 “Ice” 布局。
相对大小（em、%）应该用在非静态的布局中，以及需要在网站可用性和设计者对布局的控制之间做出妥协的情况下。
关键字大小（将在下面进行解释）应该用在可用性比其它所有设计考虑都重要的情况下。

绝对大小和可用性

较早版本的 IE 不允许访问者对那些已经被设置为绝对大小的文本进行大小调整，而那些允许用户进行这种操作的浏览器，它们的文本大小调整界面又很难找到（Opera 和 Firebox 的用户只要分别使用 Shift + Ctrl/Cmd + plus/minus 和 Ctrl/Cmd + plus/minus 就能轻易调出该界面）。因为这些限制，将 body 的 font-size 设置成相对值就成了大家的习惯做法，通常我们用 em 单位来设置相对值，因为 em 单位是基于浏览器默认值来定义的。

桌面像素在实际中等同于什么？

对这个问题最准确的答案就是没有这样的东西。像素是显示器分辨率的一个单位，仅此而已，但是……

尽管从字面上定义或预计一个像素的大小是完全不可能的，在发现他们的网站设计在客户端变成了另一种外观，与他们自己的设置截然不同的时候，商业项目主办方会非常震惊，并且会因此向网站设计者发火。为了避免这种情况，了解一下像素是怎样运作的会很有帮助——如果你为之创建网站的主办方抱怨说文本在不同的机子上的外观没有完全一样的话，这些知识就可以作为你争辩的论据。

软件发行商有一个不成文的规定，那就是 96ppi（像素/每英寸）是一个合理的数量。因此 16 像素的正文将按 1/6 英寸或 12 个点数来打印。在日益普及的 17″ 1280x800 液晶显示器上，这样的 16 像素的文本在屏幕上的大小将接近 13 个点数，但在类似的 15 寸笔记本显示器上，其大小将是 11.44 个点数。

这些数量对默认设置是有效的。大多数环境下，终端用户都可以设置一个自定义 ppi 数量，因此会造成一些边缘情况。

综上所述：1 像素就是 1 像素,但其它一切都是变化的。

CSS 中的字体高,百分比和点数

传统上，em 等于其所应用到的字体中的大写字母 “M” 的高度，但是，在 CSS中，em 单位实际是等于一行的总高度的；换言之，对于一个 font-size 为 14 像素的元素来说：

1em = 100% = 14px

在典型环境下，上面的命题可以扩展为：

1em = 100% = 14px = 10.5pt

大小的增减是用乘法操作的，因此如果你想将第二元素的大小设置为16像素，在正常继承的情况下，下面所有的值都能得到理想的结果：

1.143em = 114.3% ≈ 16px = 12pt

官方 CSS2.1 推荐的简要说明

有时你会发现自己得考虑到万维网联盟的 CSS 2.1 规范的候选推荐标准。像 W3C 的其它推荐一样，这份文件可以被看作是一部 Web 标准的明确描述；其中有些部分比起其它部分来说，在浏览器发行商和 web 开发员中得到了更加切实的遵守。

尽管在广度和深度上具备关于W3C推荐的知识是很有好处的，但本教程的目的是为你提供 web 开发/设计的简明而易于消化的导论，而 W3C 推荐至少可以说有点冗长，因此就不赘述了。所有将你引向 CSS2.1 推荐的案例所指向的资料都很不容易理解，因此就不能在本文中进行精确解释了。

大小关键字

就如在上面所提到的，你也可以使用大小关键字。从 xx-small 直到 xx-large，还有作为中间值（也是默认值）的 medium，共有 7 个关键字。所有的 7 个值都列在下面的表 3 中，该表包括了本文所讨论的各种 CSS 属性能支持的关键字。

CSS2.1 推荐提供了大量关于 font-size 关键字的补充细节。

示例1

这篇教材将不时地链接到渐进的样式处理示例文件，该文件的作用是在实际运用中展示我们所讨论的 CSS 属性。第一个示例展示了完全没有经过样式处理的 HTML 示例文档。

链接：

新规则

body { font-size: 14px; }
h1 { font-size: x-large; }
.sectionNote { font-size: medium; }
.attribution { font-size: small; }

font-family 和字样选择

在文本大小令你满意之后，你就可以开始进行字样选择。这是通过 font-family 属性来完成的，如下面的示例2所示。

在为 font-family 属性设定属性值的时候，你应当遵循如下规则：

字样的名称必须完全与客户端字体库中的名称一致，其命名的参照标准是不变字体。
所有命名后的字样必须用逗号分开，逗号后面可以跟空格也可以不跟。
如果字样的名称包含了一个以上的词，必须用单引号或双引号框起来。比如: 'Times New Roman'.
字样的命名应当根据可获得性之类的标准进行升序排列。比如，如果你希望 Macintosh 用户看到字体设置为 Palatino 的一个网页，你的属性值声明应该按照如下方式排列：font-family: Palatino, Georgia, serif; Palatino 正是你想要的字体，但有些用户可能没有这种字体；Georgia的可获得性要大得多，而且又与 Palatino 相似；Serif 指的是普通的默认 serif 字体。如果 Palatino 和 Georgia 都不可用，系统将回到其默认的 serif 字体。
作为一种故障应对机制，font-family 的值应该总是以适当的常用名来结尾，如上所述。图1展示了 MacOS 10.5 下普通字型体系中的字样。

default generic type in MacOS 10.5.

图1：MacOS 10.5 下的默认“普通”字样，在 Safri3.1 中渲染为 24px

CSS2.1 推荐罗列出了几个可以应用到每个字型体系的字样。

示例2

既然文本大小是可以预见的，我们就应该优化所使用的字样。为了保证可辨认性，标题最好设置为 sans serif 字样，叙述部分则使用 serif 字样。

链接:

新规则

body { font-family: Palatino,'Palatino Linotype',Georgia,
            sans-serif; }
h1 { font-family: Helvetica,Arial,sans-serif; }
blockquote { font-family: Helvetica,Arial,sans-serif; }

font-style, font-variant, 和font-weight：改变细节

font-style属性可以在不用i元素的情况下设置斜体字。它的三个有效值是 italic，oblique 以及 normal。

italic 和 oblique 属性值在市场上畅销的所有最新版本的浏览器中有着同样的效果，虽然这两种样式之间有着重要的技术差别，如本教程附带的词汇表中所示。

为什么在 em 和 i 元素足以胜任的情况下还要使用 font-style 属性？

这些元素每个都有着特定用途：em 是进行强调，而在这几个适合使用 i 元素的范例中，它是作为 <span style="font-style: italic;">…</span> 的替换对象。一般 <i> 是完全不适合使用的，因为它是一个表象元素，但也有些文本片段按照惯例是要设为斜体的，比如像书的标题（虽然这还存在争议；有些人认为对于书标题来说 cite 元素更适合。你可以采用看起来最适合的形式）。<em> 一般会更加适合使用，因为它将强调规定为一个概念，而不是将斜体字规定为一个特定的样式——强调的实际外观可能会由于浏览器的不同而有所差异。

在有些情况下，em 和其近亲 strong 需要采用不同的使用方法。比如，假设你想要通过放大字体来强调某些文字。加粗强调的一贯步骤会在后面添加斜体，如下面的规则所示：

em {
	font-size: large;
	font-style: normal;
}

strong {
	font-size: large;
	font-weight: normal;
	font-style: italic;
}

上面的样式表规则将产生类似于下面的结果：

The quick red fox jumped over the lazy brown dog.

示例3

在本示例的正文中并没有斜体字或斜体段落，由于使用了 cite 元素，本示例的出处中已经包含了必要的斜体设置。如果缺少应用对象，标题将是使用斜体的最佳候选对象。

链接:

新规则

h1 { font-style: italic; }
.sectionNote { font-style: normal; }

实现短文突出显示的另一种工具：font-variant

font-variant 属性有两个合法值，small-caps 和 normal。一些设计者用“Small caps”（也叫做“铜板印刷”字体）来突出显示一长段文字的开头的词组，或者对引用的标记进行强调，比如下面内容：

Abandon all hope, ye who enter here.

示例4

链接:

新规则:

.opening { font-variant: small-caps; }

font-weight：加粗与不加粗

font-weight 属性让你能改变应用了该属性的任何文本段落的加粗级别。

font-weight 属性支持的属性值中最常见的是 normal 和 bold，而 CSS2.1 推荐提供了一些其它的属性值，网站排版的现行支持状态使得这里的其它属性值对除了专业用户之外的所有用户毫无功能上的意义。

示例5

对作者姓名使用粗体字样是杂志期刊经常用到的设计技术，这也同样适用于网站上的各种情况。

链接:

新规则:

.author { font-weight: bold; }

字体缩写属性

如果有必要的话，可以按照与背景属性缩写相似的方式，在一个属性里面设置多个文本属性值。

字体的缩写规则如下：

h1 { font: italic normal bold x-large/1.167em Helvetica,Arial,sans-serif; }

为了达到最佳效果，你为这个属性设置的值应该包括你想对下面的所有属性设置的值，设置的时候也要按照下面的顺序，属性值之间用空格符分开：

font-style
font-variant
font-weight
font-size，如果必要的话，后面可以跟一个斜线号“/”，以及 line-height 值（如下所示）
font-family，在本例中该属性值也可以是一个指定了某个系统字体保留字；多个值之间应当用逗号而不是空格来隔开。

表3：本文中所讨论的属性可支持的关键字值
属性	值
font-family	`cursive`, `fantasy`, `monospace`, `sans-serif`, `serif`
font-size	`xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`
font-style	`italic`, `normal`, `oblique`
font-variant	`normal`, `small-caps`
font-weight	`bold`, `normal`
line-height	`normal`
text-align	`center`, `justify`, `left`, `right`
text-decoration	`line-through`, `none`, `overline`, `underline`
text-transform	`capitalize`, `lowercase`, `none`, `uppercase`
white-space	`normal`, `nowrap`, `pre`, `pre-line`, `pre-wrap`

CSS 文本和对齐属性：排字修改

一名设计师在处理字母和单词的细节：线条，曲线，圆点，像素和设计中的其它因素。但是设计是一个整体；它还有其它更大的组成部分，这些组成部分通过排字集中起来，而排字主要是由 CSS 布局模式控制的。除了布局模式之外，CSS 还会运用文本和对齐属性来对排字进行调整。

文本对齐和两端对齐

在文字处理环境中，text-align 属性支持四种调整值：left、right、center 和 justify。最后一个值可以进行两端对齐：该属性值会对一段文字的可见的文本边距进行调整，使左边距和右边距一致。

对用英文字母编写的文字说明进行适当的对齐

各种可用的对齐方式的最佳应用方法如下：

左对齐是最适合长篇的叙述性文章的。
右对齐最适合数据表的最左边一栏以及多栏式布局。当相邻栏向左对齐并位于一条宽度适当的中缝的一侧时，就可以提高两个栏的可辨认性。
两端对齐对于区块引用和小块文本之类的小型区块效果很好。如果用在设置了最佳宽度的记叙文的长段落上，全面调整也能提高你的布局的条理性。
居中对齐通常是用在界面元素和诸如网站页脚中的列表之类的连续列表上。

示例6

既然本示例是来源于一本书中的小说，为什么不对它进行两端对齐呢？

链接:

新规则:

p { text-align: justify; }
blockquote p { text-align: left; }

改变字距：letter-spacing 和 word-spacing 属性

这些属性是非常好理解的；它们能让你分别改变字母和单词之间的空格数量。

letter-spacing 的最常见的用法是进行一些细微的强调，其效果与 font-variant: small-caps; 相似，该属性也可以用来对界面元素的组合进行细微改变。

word-spacing 属性最适合用在人为改变文本行中出现的单词数量。比如说，如果你有一段文字块，该文字块具有典型宽度和非典型字号，你就可以用这种属性。

在打印时，字间距和词间距是用来实现避免组合缺点的特殊用途的，但在 Web 上这项技术的用处非常有限。

除了单位属性值，这两个属性也支持 normal 值。

使用 em 单位来实现更好的控制

当你改变文本字间距的时候，会发生长距离的位移；默认的字间距是在一个 em 的 1/10 到 1/20 之间，因此 letter-spacing 值所进行的修改会使字间距大于默认设置两倍或者是默认设置的一半，这很可能会使文本变得难以辨认。

示例7

在末尾的标志文本可以使用一些细微的强调……由于格言引用部分设置了更大的尺寸，因此可以通过使用一些词间距来对其进行改进。

链接:

新规则:

q { letter-spacing: .143em; }
.pullQuote { word-spacing: .143em; }

首行缩进：text-indent 属性

text-indent 属性使我们能够在印刷品的传统样式中实现段落缩进。同样也有一些高级布局技术是基于本属性实现的，并且该属性支持负属性值。

此属性所支持的值与 font-size 所支持的一样，此外它还支持 normal。

示例8

根据同样的原理，文本进行了两端对齐处理，也许我们应该对它的所有段落应用缩进：

链接:

新规则:

p { text-indent: 1.429em; }
blockquote p { text-indent: 0; }

大写：the text-transform 属性

正如 font-variant 属性让你能使用铜版印刷字体，text-transform 属性专门对大写进行处理。它的合法值可以对文本进行全部大写、全部小写或者全部首行大写的渲染。关于合法值的列表，请参见上面的表3。

示例9

链接:

新规则:

.author { text-transform: uppercase; }

链接样式和缺失显示：text-decoration 属性

此属性可以在文本的上方、下方或者中间添加直线。其最常见的用法是用来控制默认的链接下划线，不过 wikis、satire 和其它设置也会要求使用删除线。在这些情况下，你可能会想要使用 ins（插入）和 del（删除）元素，这些元素可以提供与下面代码同样的样式：

ins {
  text-decoration: underline;
}

del {
  text-decoration: line-through;
 }

就算没有自定义样式表规则，ins 和 del 也可以将标记样式化，如下所示：

~~Mark Twain~~ Benjamin Disraeli is remembered for many witticisms, including “there are lies, damned lies, and statistics.”

带 acronym 和 abbr 的边框，而非下划线

在一些设计者中很流行变换 acronym 和 abbr 元素的外观，这样乍一看它们就像点线状的下划线一样。但是，这个效果实际上要通过 border-bottom 值来实现。（别忘了有些浏览器会自动生成这个效果，但其它像IE6这样的就没有）

示例10

链接:

新规则:

.source a { text-decoration: none; }

行间距调整和行高

大家都知道，为了提高易读性我们必须在文本行之间留有一些空白，因为增加的空白可以保证相邻行的字母的上伸部分和下伸部分（参见图2）不会产生视觉效果上的冲突。

Ascenders are the parts of letters that rise above the mean line of the text and descenders are the parts of letters that drop below the base line that the text sits on

图2：字母的上伸部分就是超过文本平均线之上的部分；下伸部分就是越过文本基准线以下的部分。

一个元素的 font-size 和其 line-height 的关系并不紧密，但默认情况下，所有用户代理都会在文本的每一行插入少量的行间距——通常是字母本身高度的10-15%。因为这个默认值会随字样而改变，除了数子值之外，line-height 属性支持也支持 normal。

还需要注意的是，与大部分 CSS 属性不同，line-height 属性可以接受没有单位的数字值，这样的值将作为默认值的百分比来渲染。

示例11

行间距和易读性是密切相关的，在本示例中这一点就可以得到证明：

链接:

新规则:

           p { line-height: 1.5; }
.attribution { line-height: 1.5; }

替换 pre 和 br: white-space 属性

从最严格的意义上来说，强制换行只是一种表象元素，但是在许多情况下它们是一种网站设计的可取元素。与浏览器在任意的地方进行强制换行的习惯一样，单独使用标记来达到我们想要的控制程度可能是很难的。

pre 元素可以用于处理这些困难，但是它也有着自己的问题，这就是为什么 CSS 提供 white-space 属性的原因。在表3中列出的它所支持的值，使设计师可以选择是否让浏览器对已经添加进源标记或作为生成内容插入的空白和换行进行渲染。

CSS2.1 推荐提供了关于 white-space 属性的建议用法的全面细节。

总结

一个优秀的网站设计应当高度关注细节以及对许多元素的互动的恰当调节。

目前的浏览器所支持的 CSS 字体和文本属性，对排版提供了几乎是目前输出设备所允许的最高等级的控制，这取决于一个尽责的网站设计师是否学习如何使用它们。若能成功使用这些属性，网站的投入运行就可以激励我们寻求针对排版的质量标准，这些标准与跨越几个世纪的印刷媒体更普遍相关，尽管网络的出现还不到一代人的时间。

练习题

列举 b 和 i 以外的三个可由默认的变形字体渲染的 html 元素。简要描述你所列出的元素的用途，并说明怎样将一个变形字体适当地应用到这些元素中。
主观测试一下你选择的长篇文本在不同的 line-height 值下的可读性。简要总结你的结果。
将 text-transform: uppercase; 应用到前面习题中的文本的某个段落；重复你的可读性主观测试。简要总结你的结果。
参考本文中的排版回顾，简要说明反锯齿的优缺点。
描述在 font-family 值中，应该按照什么顺序来指定字样。
在完全没有看到过的设置里面，找出本文描述过的至少三个属性，并列出每个属性的至少一个有效值（除了默认值）。演示或描述在样式表中这些属性/值对的应用效果。
创建一个元素，应用到文本里面，并为其设置 9px 的 font-size 值。在 IE 中打开包含有这个元素的文档，并逐一尝试 View → Text Size 菜单中提供的字号。评估一下在一个拥有大量的中老年访问者的网站上，这些字号的效果的适宜性如何。