摘要：有几个不同的因素致使它的流行。在这四个值中，我们最常用的就是将文本设置为斜体和将文本恢复为正常样式。因此任何低于的值会显得更细，而高于的值会显得更粗。目前浏览器默认为蓝色，我们要把它改成和到元素一致的颜色。

随着时间的推移，网络字体排版已经得到了很大的发展。有几个不同的因素致使它的流行。其中被最广泛认可的因素是可嵌入我们自己的网络字体的系统的开发。

过去我们只能在网站中使用少量的字体。这些字体都是电脑中最常用的，所以它们最可能在屏幕上正常显示。如果一个字体没有安装在电脑中，那么网页上就不能正常显示。现在随着嵌入字体的发展，我们有了更多的字体选择空间，包括那些我们添加到网站中的字体。

虽然嵌入字体的开发使我们能够使用无数的新字体，但了解字体排版的基本原则还是必不可少的。在这节课中，我们将带领大家了解这些基本原则，并将它们应用到我们的HTML和CSS中。

字型(Typeface) VS. 字体(font)

字型‘typeface’和字体‘font’经常被互换，很容易混淆。在这里对它们实际的含义做一个讲解。

字型‘typeface’表示我们看到的。它是文字的外观、感觉和阅读的艺术印象。

字体‘font’表示包含一个字型‘typeface’的文件，在电脑中安装一个字体‘font’使电脑能够获取到这个字型‘typeface’。

我们可以分别将它们比作一首歌和一个MP3，字型‘typeface’就类似于一首歌，只不过它是美术作品。而字体‘font’就类似于MP3，但它本身并不带有艺术印象，只是一个传递艺术的媒介。

译者：我不会区分这两个单词的翻译，正常情况我都会使用“字体”来翻译它们，想要了解得更细致的读者可以阅读原文

我们在创建网站时通常会设置一个主字体及其颜色。虽然有很多例如字体大小、粗细等属性可以设置，但对页面视觉效果影响最大的还是其字型和颜色。用我们自定义的字体和颜色覆盖浏览器的默认值，可以立即奠定我们页面的基调风格。

设置字体颜色的属性为color属性。color属性可以接受几种不同格式的色值。这些格式我们有在第三节课HTML&CSS Lesson3: 了解CSS中提到，包括：关键字色值，十六进制色值，RGB，RGBa和HSL，HSLa。十六进制色值的使用是最普遍的，因为它非常便捷，非常可控。

以下例子是改变页面中所有元素下的文本的颜色：

html {
  color: #555;
}

CSS 提供了很多属性用于编辑页面文本的样式。这些属性分为两类：基于文字的属性和基于文本的属性。大部分的属性都以font-*或text-*为前缀。接下来我们来了解一下基于文字的属性。

font-family属性用于声明使用哪种字体——包括备选或替代字体——来显示文本。font-family的属性值可以同时包含多个字体名，用逗号隔开。

左边开始第一个声明的字体就是主字体，如果主字体不可用，则会按照从左到右的顺序选用备选字体来代替。

当字体名由多个词组成时，需要用引号将它们包起来。另外，最后一个字体应该指定系统默认字体，比如最常用的sans-serif或serif.

font-family属性使用示例如下：

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

在这个例子中，首先会选用Helvetica Neue字体，如果它不可用或者当前设备并没有安装此字体，那么会按照顺序选用下一个字体——Helvetica, 依次类推。

font-size属性提供了使用常见长度单位例如像素(px)，em，百分比(%)，点(pt)或关键字给文本设置字体大小的功能。

以下是将body元素的字体大小font-size设置为14像素：

body {
  font-size: 14px;
}

将文本变为斜体或者防止文本变为斜体，我们就要用到font-style属性。font-style属性接受四个关键字值：normal，italic，oblique和inherit。在这四个值中，我们最常用的就是italic(将文本设置为斜体)和normal(将文本恢复为正常样式)。

以下是将class为special的元素的字体样式font-style设置为斜体italic：

.special {
  font-style: italic;
}

这个属性并不常用，只有偶尔需要将文本设置为小型大写字母的情况下会到font-variant属性。font-variant接受三个值:normal，small-caps和inherit。最常用的值就是normal和small-caps,将文本切换为正常模式或者转换成小型大写字母。

以下是将class为firm的元素的文本转化为小型大写字母：

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

偶尔我们会想将文字加粗或者设置到某个特定的粗细，这时候我们就要使用font-weight属性。font-weight的值可以设置为关键字或数字。

关键字值有normal，bold，bolder，lighter和inherit。 在这些关键字值中，推荐使用normal和bold来设置字体的粗细，避免bolder或者lighter，最好使用数字值来完成更精准的控制。

以下练习中，将class为daring的元素的字体粗细font-weight设置为bold加粗。

.daring {
  font-weight: bold;
}

数字值100，200，300，400，500，600，700 和900可以更精准的设置文字的粗细。文字从最细的100，按比例放大到最粗的900。参考了一下，关键字normal映射到400，关键字bold映射到700。因此任何低于400的值会显得更细，而高于700的值会显得更粗。

将class为daring的font-weight设置为600后，文本看起来加粗了，但不像bold那么粗：

.daring {
  font-weight: 600;
}

文字粗细

在使用数字值之前，我们需要确认当前字体是否支持我们想要的字体粗细。若不支持，那么这个粗细值就会默认为最接近它的有效值。

例如， Times New Roman字体有两种粗细：normal(400)和bold(700)，若尝试把字体粗细设置为900将会默认变为最接近值700

行高使用line-height属性声明，表示两行文本之间的距离。line-height 接受所有常规长度值，长度单位我们在第三课中有提到：了解CSS。

可读性最佳的方案是将line-height设置为font-size的1.5倍。我们可以通过将line-height设置为150%或1.5来快速实现。但如果文本有基准线，则用像素px来控制line-height会更合适。

以下例子中，我们把body元素中的行高line-height设置成22px：

body {
  line-height: 22px;
}

行高也可以为单行文本的元素设置上下居中。将line-height和height的属性值设置成相同值就可以实现：

.btn {
  height: 22px;
  line-height: 22px;
}

这种用法常见于按钮，弹出信息框，以及其他单行文本的块中。

以上列出的文字属性可以合并成一个font属性及其简写值。font属性接受多个基于文字的属性的值。这些值的排序如下所示，从左到右依次为：font-style， font-variant，font-weight，font-size， line-height和 font-family。

作为一个简写值，属性值之间并不需要用逗号隔开(除了文字名，也就是font-family的多个值之间需要用逗号)。但font-size和line-height属性值之间需要用斜杠/隔开。

当使用简写值时，除了font-size和font-family是必写值，其他值都是可选的。也就是说，我们可以按需求只写font-size和font-family的属性值。

html {
  font: italic small-caps bold 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
}

使用所有的字体属性

我们来看一个使用所有的字体属性的例子。HTML和CSS如下所示：

HTML

I Am a Builder

Posted by Shay Howe

Every day I see designers and developers working alongside one another. They work intelligently in pursuit of business objectives. They work diligently making exceptional products. They solve real problems and take pride in their work. They are builders. Continue…

CSS

h2,
p {
  color: #555;
  font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
  color: #0087cc;
}
a:hover {
  color: #ff7b29;
}
h2 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 6px;
}
.byline {
  color: #9799a7;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  margin-bottom: 18px;
}

CSS伪类选择器

上述的例子中，我们使用了之前没见过的CSS伪类选择器:hover。 伪类是可以添加到选择器后用以调整元素某种状态下样式的关键字选择器。

:hover是用户把鼠标悬浮在某元素上时改变其样式的选择器。 上述中我们把它用在元素上，可以到看所有的元素在鼠标悬停时字体颜色都会发生改变。

/*
  ========================================
  Custom styles
  ========================================
*/
body {
  color: #888;
  font: 300 16px/22px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4 {
  color: #648880;
}

和

元素的font-size会相对较大，所以它们的line-height也要调整以保证文字正常清晰显示。这里我们将line-height值设置为44px，是元素line-height的两倍。

h1 {
  font-size: 36px;
  line-height: 44px;
}
h2 {
  font-size: 24px;
  line-height: 44px;
}
h3 {
  font-size: 21px;
}
h4 {
  font-size: 18px;
}

元素相对其他标题元素会更特别一点，所以我们要修改一些样式。

我们为这些元素设置一个不一样的color值和一个更小的font-size，同时也把`font-weight设置为400或者normal。

浏览器在渲染标题元素时是默认加粗的，而我的标题元素目前的font-weight为300。我们首先在main.css最上面重置了样式，将标题元素的font-weight设置为了normal，然后又在元素选择器中将font-weight设置为了300。

元素的font-weight设置为了400会使这个标题的文本看起来更粗一些。

h5 {
  color: #a9b2b9;
  font-size: 14px;
  font-weight: 400;
}

在样式表最开始我们重置了浏览器默认样式。而现在我们要为，和再重新设置样式。我们将元素的font-weight设置为400或normal，这相对来说比大部分文本都粗一些。接着我们将和元素的font-style设置为italic。

strong {
  font-weight: 400;
}
cite, em {
  font-style: italic;
}

接着我们来调整元素的样式。目前浏览器默认为蓝色，我们要把它改成和

到

元素一致的颜色。另外，我们将鼠标悬浮在上时的:hover状态的color改为浅灰色。

/*
  ========================================
  Links
  ========================================
*/

a:hover {
  color: #a9b2b9;
}
a {
  color: #648880;
}

下面我们来更新

元素的样式。我们在.logo选择器中添加font-size和line-height，添加到现有的border-top，float，andpadding属性之间。

.logo {
  border-top: 4px solid #648880;
  float: left;
  font-size: 48px;
  line-height: 44px;
  padding: 40px 0 22px 0;
}

因为我们增大了.logo选择器元素的大小，所以我们要增加

元素中的

元素的margin属性以保持平衡。我们先为

元素添加一个class tagline用以设置外边距margin。

以下我们是要修改的内容，需要应用到每个页面中：

HTML

August 24–26th — Chicago, IL

CSS

.tagline {
  margin: 66px 0 22px 0;
}

做完这些之后，我们为