本节书摘来自异步社区《HTML5+CSS3网页设计入门必读》一书中的第6章，第6.3节,作者： 【美】Julie Meloni更多章节内容可以访问云栖社区“异步社区”公众号查看。
6.3 调整字体
有时，你可能想对文本的大小和外观进行更多一点控制，而不仅仅是将其设置为粗体或斜体。在我深入讨论使用CSS调整字体的合适方式之前，让我们简要探讨在CSS出现之前是怎样操作的：当你查看其他Web站点的源代码时，仍有可能发现这种方法的一些示例。记住，仅仅由于这些老方法仍在使用并不意味着你应该如法炮制。
在样式表投入使用之前，现在被逐步淘汰的标签用于控制Web页面文本中的字体。
注意：
我不能充分强调标签将不会被使用！这里仅仅出于演示和历史目的而使用它。
例如，曾经使用下面的HTML代码更改页面上的一些文本的大小和颜色：
<font size="5" color="purple">This text will be big and purple.</font>
可以看到，< font >标签的size和color属性使得可以不用太费力地改变文本的字体。尽管这种方法工作得很好，但是由于CSS样式规则，它已经被一种更高级的字体格式化方法所取代。下面给出了几种用于控制字体的主要的样式规则。
- font-family：设置字体系列（字形）。
- font-size：设置字体的大小。
- color：设置字体的颜色。
font-family样式规则允许设置用于显示文本的字形。你可以（并且通常应该）为这个样式指定多个值（用逗号隔开），使得如果用户系统上的第一种字体不可用，那么浏览器将可以尝试一种替代字体。
注意：
在第7章中将学习关于控制页面上的文本颜色的更多知识。该章还将说明如何创建你自己的自定义颜色，以及控制文本链接的颜色。
提供替代字体系列很重要，因为每个用户都可能会安装不同的字体集，至少会超越常用的基本核心字体集（如Arial、Times New Roman等）。通过提供替代字体列表，当无法找到理想的字体时，就有更好的机会使页面优雅地转而依靠一种已知的字体。下面给出了一个font-family样式的示例，它用于设置一个文本段落的字形：
<p style="font-family:arial, sans-serif, 'times roman'">
这个示例具有几个有趣的部分。第一，将arial指定为主字体。大小写不影响字体系列，因此arial与Arial或ARIAL没有什么不同。关于这段代码的另一个有趣的方面是：字体名称“times roman”是用单引号括住的，因为它中间有一个空格。不过，由于'times roman'出现在sans-serif的通用规范之后，将不太可能使用它。由于sans-serif位于第二个位置，因此它告诉浏览器：“如果这台机器上没有安装Arial，那么就使用默认的sans-serif字体。”
font-size和color样式规则也常用于控制字体的大小和颜色。font-size样式可以设置为一种预先定义的大小（如small、medium或large）；color则可以设置为一种预先定义的颜色（如white、black、blue、red或green），或者可以把它设置为一种特定的十六进制颜色（如#ffb499）。下面是前一个段落示例的更好版本，并且指定了字体大小和颜色：
<p style="font-family:arial, 'times roman', sans-serif; font-size:;
color:green">
程序清单6.3中的示例Web内容以及如图6.3所示的结果，使用了一些字体样式规则来创建一份基本的在线简历的开始部分。
注意：
在第7章将学习十六进制颜色。目前，只需理解color样式规则允许指定精确的颜色，而不仅仅是使用green、blue、orange等。
程序清单6.3 使用字体样式规则创建基本的简历
<!DOCTYPE html>
<html lang="en">
<head>
<title>Résumé for Jane Doe</title>
<style type="text/css">
body {
font-family: Verdana, sans-serif;
font-size: 12px;
}
header {
text-align: center;
}
h1 {
font-family:, serif;
font-size:28px;
text-align:center;
}
p.contactinfo {
font-size:14px;
}
p.categorylabel {
font-size:12px;
font-weight:bold;
text-transform:uppercase;
}
div.indented {
margin-left: 25px;
}
</style>
</head>
<body>
<header>
<h1>Jane Doe</h1>
<p class="contactinfo">, Sometown,
CA 93829<br/>
tel: 555-555-1212, e-mail: jane@doe.com</p>
</header>
<section>
<p class="categorylabel">Summary of Qualifications</p>
<ul>
<li>Highly skilled and dedicated professional offering a
solid background in whatever it is you need.</li>
<li>Provide comprehensive direction for whatever it is
that will get me a job.</li>
<li>Computer proficient in a wide range of industry-related
computer programs and equipment. Any industry.</li>
</ul>
</section>
<section>
<p class="categorylabel">Professional Experience</p>
<div class="indented">
<p><strong>Operations Manager,
Super Awesome Company, Some City, CA [Sept 2002 –
present]</strong></p>
<ul>
<li>Direct all departmental operations</li>
<li>Coordinate work with internal and external
resources</li>
<li>Generally in charge of everything</li>
</ul>
<p><strong>Project Manager,
Less Awesome Company, Some City, CA [May 2000 - Sept
2002]</strong></p>
<ul>
<li>Direct all departmental operations</li>
<li>Coordinate work with internal and external
resources</li>
<li>Generally in charge of everything</li>
</ul>
/div>
</section>
<section>
<p class="categorylabel">Education</p>
<ul>
<li>MBA, , May 2002</li>
<li>B.A, Business Administration, ,
May 2000</li>
</ul>
</section>
<section>
<p class="categorylabel">References</p>
<ul>
<li>Available upon request.</li>
</ul>
</section>
</body>
</html>
使用CSS，如你在第3章中所学到的，它把样式集组织成类，可以看到文本格式化是如何应用于这段内容的不同区域的。如果密切查看div.indented类的定义，将会看到margin-left样式的使用。这个样式对元素的左边应用一定的空间量（在这个示例中是25像素），这个空间将导致图6.3中所示的缩进效果。
