随着时间的推移，网络字体排版已经得到了很大的发展。有几个不同的因素致使它的流行。其中被最广泛认可的因素是可嵌入我们自己的网络字体的系统的开发。
过去我们只能在网站中使用少量的字体。这些字体都是电脑中最常用的，所以它们最可能在屏幕上正常显示。如果一个字体没有安装在电脑中，那么网页上就不能正常显示。现在随着嵌入字体的发展，我们有了更多的字体选择空间，包括那些我们添加到网站中的字体。
虽然嵌入字体的开发使我们能够使用无数的新字体，但了解字体排版的基本原则还是必不可少的。在这节课中，我们将带领大家了解这些基本原则，并将它们应用到我们的HTML和CSS中。
字型‘typeface’和字体‘font’经常被互换，很容易混淆。在这里对它们实际的含义做一个讲解。
字型‘typeface’表示我们看到的。它是文字的外观、感觉和阅读的艺术印象。
字体‘font’表示包含一个字型‘typeface’的文件，在电脑中安装一个字体‘font’使电脑能够获取到这个字型‘typeface’。
我们可以分别将它们比作一首歌和一个MP3，字型‘typeface’就类似于一首歌，只不过它是美术作品。而字体‘font’就类似于MP3，但它本身并不带有艺术印象，只是一个传递艺术的媒介。
译者：我不会区分这两个单词的翻译，正常情况我都会使用“字体”来翻译它们，想要了解得更细致的读者可以阅读原文
设置字体颜色
我们在创建网站时通常会设置一个主字体及其颜色。虽然有很多例如字体大小、粗细等属性可以设置，但对页面视觉效果影响最大的还是其字型和颜色。用我们自定义的字体和颜色覆盖浏览器的默认值，可以立即奠定我们页面的基调风格。
设置字体颜色的属性为color属性。color属性可以接受几种不同格式的色值。这些格式我们有在第三节课HTML&CSS Lesson3: 了解CSS中提到，包括：关键字色值，十六进制色值，RGB，RGBa和HSL，HSLa。十六进制色值的使用是最普遍的，因为它非常便捷，非常可控。
以下例子是改变页面中所有<html>元素下的文本的颜色：
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如下所示：
<h2><a href="#">I Am a Builder</a></h2><p class="byline">Posted by Shay Howe</p><p>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. <a href="#">Continue…</a></p>
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; }
登录 | 立即注册