[译]HTML&CSS Lesson6: 排版

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

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

虽然嵌入字体的开发使我们能够使用无数的新字体，但了解字体排版的基本原则还是必不可少的。在这节课中，我们将带领大家了解这些基本原则，并将它们应用到我们的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>元素下的文本的颜色：

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-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

<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&#8230;</a></p>

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

练习

现在回到我们的“样式讨论会”网站，为它添加一些字体属性样式。

我们从更新所有文本的样式开始。首先我们为<body>元素以font属性及其简写值方式添加color，font-weight，font-size，line-height和font-family属性值。
为了尽可能保持main.css的有序性，我们新划分一块区域放置这些样式，位置在重置样式和网格样式之间。
样式内容如下所示：

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

在第四课盒子模型中，我们有在各级标题以及段落添加过一些排版样式，例如下外边距。现在我们要在这部分样式区域中，为一到四级的标题元素添加字体颜色。

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

接下来我们为各级标题元素设置对应的字体大小。<h1>和<h2>元素的font-size会相对较大，所以它们的line-height也要调整以保证文字正常清晰显示。这里我们将line-height值设置为44px，是<body>元素line-height的两倍。

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

<h5>元素相对其他标题元素会更特别一点，所以我们要修改一些样式。
我们为这些元素设置一个不一样的color值和一个更小的font-size，同时也把`font-weight设置为400或者normal。
浏览器在渲染标题元素时是默认加粗的，而我的标题元素目前的font-weight为300。我们首先在main.css最上面重置了样式，将标题元素的font-weight设置为了normal，然后又在<body>元素选择器中将font-weight设置为了300。
<h5>元素的font-weight设置为了400会使这个标题的文本看起来更粗一些。

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

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

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

接着我们来调整<a>元素的样式。目前浏览器默认为蓝色，我们要把它改成和<h1>到<h4>元素一致的颜色。另外，我们将鼠标悬浮在<a>上时的:hover状态的color改为浅灰色。

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

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

下面我们来更新<header>元素的样式。我们在.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选择器元素的大小，所以我们要增加<header>元素中的<h3>元素的margin属性以保持平衡。我们先为<h3>元素添加一个class tagline用以设置外边距margin。

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

HTML

<h3 class="tagline">August 24&ndash;26th &mdash; Chicago, IL</h3>

CSS

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

做完这些之后，我们为<nav>元素添加样式。首先为其添加一个class primary-nav，并设置font-size和font-weight属性以使得导航能从页头中脱颖而出。

HTML

<nav class="primary-nav">
  ...
</nav>

CSS

.primary-nav {
  font-size: 14px;
  font-weight: 400;
}

<header>元素已经调整差不多了，我们接着来看<footer>元素，之前课程中我们为其设置了class primary-footer，现在我们在其中加入color和font-size属性。除此之外，我们也要将<small>元素的font-weight设置为400。
修改后的代码如下所示：

.primary-footer {
  color: #648880;
  font-size: 14px;
  padding-bottom: 44px;
  padding-top: 44px;
}
.primary-footer small {
  float: left;
  font-weight: 400;
}

回到主页面上来，我们将导航模块的line-height调整到44px。<h2>的font-size调整到36px，所有段落<p>元素的font-size调整到24px。
我们把这部分样式添加到已存在的.hero选择器中，并为<h2>和<p>元素创建新的选择器。修改后代码如下所示：

.hero {
  line-height: 44px;
  padding: 22px 80px 66px 80px;
}
.hero h2 {
  font-size: 36px;
}
.hero p {
  font-size: 24px;
}

最后主页中还剩下一个小问题。之前我们将所有的锚点元素<a>鼠标悬浮时的字体颜色设置为了淡灰。但是<a>元素中包裹的<h3>和<h5>元素由于自身定义了color，<a>元素:hover效果下的color不起效。
现在我们就要用相对复杂的选择器去修复这个问题，我们先为每个section元素添加一个class teaser，如下所示：

<section class="grid">

  <!-- Speakers -->
  
  <section class="teaser col-1-3">
    <a href="speakers.html">
      <h5>Speakers</h5>
      <h3>World-Class Speakers</h3>
    </a>
    <p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
  </section>

  ...

</section>

有了这个选择器，我们就可以创建出复杂的选择器来实现需求。我们首先需要.teaser选择器来确定需要修改样式的是含有这个class的元素的内部元素。我们之前提过要修改鼠标悬浮在<a>元素上时的样式，所以需要用到:hover伪类。最后我们要添加h3选择器去选中实际要修改样式的元素。

结合起来修改的<h3>元素的样式如下所示：


.teaser a:hover h3 {
  color: #a9b2b9;
}

完成以后，可以看到页面变得更漂亮了，并且有了一点自己的风格。

设置文本属性

现在我们了解了字体属性例如字体大小，字型，粗细，行高等，接下来我们要了解文本属性例如如何对齐、修饰、缩进、变换文本以及设置文字间距。

文本对齐方式

对齐文本是页面排版中很重要的一部分，我们需要用到text-align属性。text-align属性有五个值：left，center，right，justify和inherit。这些值的意思都非常直白，就是向左对齐，向右对齐，居中以及两端对齐。

以下是将所有段落文本居中对齐：

p {
  text-align: center;
}

但不要混淆text-align属性和float属性。text-align的值left和right是让元素内部的文本向左或向右对齐。而float是让元素本身整个往左或者往右。有些时候我们期望text-align实现的效果，但也有些时候则需要用到float属性。

文本修饰

text-decoration提供了一些方法来修饰文本。它接受的值有：none，underline，overline，line-through和inherit。使用text-decoration的场景很多，最常见的就是浏览器默认的下划线链接

以下示例是为class为note的元素添加下划线：

.note {
  text-decoration: underline;
}

text-decoration属性可以一次性添加多个值，每个值之间使用空格隔开。

文本缩进

text-indent属性用于元素中第一行文本的缩进，和常见的出版物中一样。属性接受所有的常见长度单位，包括像素px，点pt，百分比%等等。正值表示想内缩进，负值表示向外缩进。

以下例子是将<p>元素的文本向内缩进20px：

p {
  text-indent: 20px;
}

文本阴影

text-shadow属性可以为文本设置一个或多个阴影。属性一般需要四个值，从左到右数前三个值是长度值，最后一个是色值。

前三个值中，第一个值确定横向偏移，第二个值确定纵向偏移，第三个值确定模糊半径。第四个值也就是最后一个值，确定阴影的颜色，色值可以是color属性值的任何颜色值。

以下例子中，将<p>元素的文本阴影颜色设置为30%不透明度的黑色，向右偏移3px，向下偏移6px，模糊半径为2px。

p {
  text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);
}

若横向和纵向偏移值为负值，阴影会向左上方偏移。

盒子阴影

text-shadow属性设置的是元素内部文字的阴影，如果我们要为整个元素设置阴影的话就要使用box-shadow属性。

box-shadow和text-shadow非常相似，也依次接受横向偏移量，纵向偏移量，模糊半径和色值。

但是它还可以接受第四个可选的长度值，这个值在色值之前，用以拓展阴影。若值为正值，阴影比元素大小更大，若为负值阴影则比元素小。

box-shadow还可以在最开始接受一个可选值inset，使阴影在盒子内部显示。

文本转换
与font-variant类似的还有一个text-transform属性。不过font-variant是将字体变为替代变体，而text-transform直接改变文本而不是使用变体。text-transform属性接受五个值：none，capitalize，uppercase，lowercase和inherit。

属性值capitalize会把每个单词的首字母转换成大写，uppercase会将每个字母转换成大写，lowercase会将每个字母转换成小写。而none则会显示原始文本。

以下示例中将<p>元素中的每个字母都转换成大写：

p {
  text-transform: uppercase;
}

字母（文字）间距

letter-spacing属性用以调整字母（文字）的间距，正值使间距变大，而负值则使间距缩小。属性值none则返回默认的文字间距。

使用相对的长度单位，会有利于随着字体大小的改变而正确的维护字母（文字）间距。不过即使如此，我们也需要保持检查代码的好习惯。

以下示例中，我们将<p>元素字母间距缩小0.5em：

p {
  letter-spacing: -.5em;
}

单词间距

与letter-spacing类似，我们可以使用word-spacing调整单词的间距。word-spacing属性值也与letter-spacing一致，不过它调整的单词间距而不是字母间距而已。

以下示例中，将<p>元素中的每个单词的间距调整为.25em：

p {
  word-spacing: .25em;
}

使用所有的文本属性

我们重温下之前使用了所有字体属性的例子，现在再给其增加一些文本属性。

HTML

<h2><a href="#">I Am a Builder</a></h2>

<p class="byline">Posted by Shay Howe</p>

<p class="intro">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&#8230;</a></p>

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;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
h2 a {
  text-decoration: none;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
}
.byline {
  color: #9799a7;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  margin-bottom: 18px;
}
.intro {
  text-indent: 15px;
}
.intro a {
  font-size: 11px;
  font-weight: bold;
  text-decoration: underline;
  text-transform: uppercase;
}

练习

对文本属性有了解之后，我们将它们应用到“样式讨论会”网站中去。

目前页面中每个链接都有默认的下划线，但有时我们并不需要它，所以对此要做一些修改。
我们将样式添加到main.css文件中，首先使用text-decoration属性移除链接的下划线，然后为<p>元素中的所有链接都增加一个border-bottom属性，这样下划线的颜色就可以设置成跟文本颜色不一致的颜色。
鼠标悬浮时的样式与之前的一致，所以最终样式如下所示：

a {
  color: #648880;
  text-decoration: none;
}
a:hover {
  color: #a9b2b9;
}
p a {
  border-bottom: 1px solid #dfe2e5;
}

我们之前到过<h5>元素和其他各级标题元素的样式有所不同，现在我们要为其再添加一个text-transform属性使所有字母转为大写。修改后的代码如下所示：

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

之前我们为<header>元素中的导航添加了一个class primary-nav，现在我们要在现有的font-size和font-weight属性之后添加letter-sapcing和text-transform属性增加字母间距并将字母转化为大写。
含有class primary-nav的<nav>元素修改后的样式如下所示：

.primary-nav {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .5px;
  text-transform: uppercase;
}

之前我们将<header>元素中的logo设置了左浮动，现在我们想将标语布局在logo右侧。我们希望它一直在<header>元素的右侧。
我们需要将带有class tagline的 <h3>元素的text-align属性值设置为right。
我们在现有的margin属性下面添加样式，修改后的样式代码如下所示：

.tagline {
  margin: 66px 0 22px 0;
  text-align: right;
}

我们想在<header>和<footer>中都添加向右对齐的导航栏。由于<header>和<footer>中都有向左浮动的子元素，所以我们可以为导航设置与tagline一样的样式。
由于<header>和<footer>中的浮动元素是脱离正常文档流的，所以其他元素会环绕浮动元素显示。因此我们的导航栏也会环绕这些浮动元素显示。
由于我们想要共享导航栏的样式，所以我们要为两个导航栏添加相同的classnav。修改后<header>元素的结构如下所示：

<header class="container group">

  <h1 class="logo">...</h1>

  <h3 class="tagline">...</h3>

  <nav class="nav primary-nav">
    ...
  </nav>

</header>

<footer>元素结构如下所示：

<footer class="primary-footer container group">

  <small>...</small>

  <nav class="nav">
    ...
  </nav>

</footer>

别忘了修改每个页面中的<header>和<footer>元素。
由于classnav用在两个导航栏中，我们在main.css文件中新划分出一个区域添加导航样式。并为其设置text-align为right。稍后我们再在此基础上拓展其他样式。

/*
  ========================================
  Navigation
  ========================================
*/

.nav {
  text-align: right;
}

我们已为很多元素添加了text-align属性，现在还需要为hero选择器设置text-align为center。刚添加的样式，以及之前现有的line-height和padding属性，都位于 main.css文件的“home page”区域。

.hero {
  line-height: 44px;
  padding: 22px 80px 66px 80px;
  text-align: center;
}

现在我们的“样式讨论会”网站有了较好的样式排版，不过我们的网站还需要进一步完善。

使用网络安全字体

每个电脑、平板、智能手机以及其他有网络浏览功能的设备都预装了一部分默认字体。我们可以在网站中自由的使用这部分字体，因为我们知道无论是什么设备，字体都会被正确渲染。这些字体就被称为“网络安全字体”。这里列出了一部分最安全的网络安全字体：

Arial
Courier New,Courier
Garamond
Georgia
Lucida Sans, Lucida Grande, Lucida
Palatino Linotype
Tahoma
Times New Roman, Times
Trebuchet
Verdana

嵌入网络字体

我们也可以通过CSS的@font-face属性，将字体上传到服务器并在网站上使用它。这个属性为线上排版创造了奇迹。从此线上排版将比以往任何事都要更加丰富多彩。

嵌入字体的步骤如下。首先我们要在@font-face中，通过font-family属性定义字体名，并通过src属性加载字体路径(我们选中的字体文件的路径)。这样我们就能够在选择器中通过font-family来获取我们定义的字体。

@font-face {
  font-family: "Lobster";
  src: local("Lobster"), url("lobster.woff") format("woff");
}
body {
  font-family: "Lobster", "Comic Sans", cursive;
}

有嵌入字体的能力不意味着有法律权限这样做。字体是艺术作品，将它发布到网站上很容易被窃取，所以字体的使用权仅限于我们批准的许可范围。

幸运的是，线上新字体的价值已经被认可，一些公司在网站的新字体上开发了授权。
这些公司中，例如 Typekit 和 Fontdeck 需要付费才能获取字体授权，而其他的公司，例如 Google Font, 则可以免费获得字体授权。所以在使用新字体之前，需要知道我们是否有权使用它。

练习

为了使“样式讨论会”网站更具个性，我们试着将谷歌字体应用到我们的网站中。

首先我们登录到 Google Fonts 网，搜索我们需要的字体：Lato。找到以后添加到需求栏，并按照步骤往下走。
到选择字体粗细的时候，我们要选择页面中使用到的300和400，再选择一个100的变体加入我们的需求栏。
谷歌给我们提供了一个放在<head>元素中的<link>元素。我们将它添加到现有的<link>元素之下。这个元素中包含了我们需要的Lato字体的@font-face的CSS文件。
添加了这个新的<link>元素之后，我们的<head>元素结构如下所示：

<head>
  <meta charset="utf-8">
  <title>Styles Conference</title>
  <link rel="stylesheet" href="assets/stylesheets/main.css">
  <link rel="stylesheet"
  href="http://fonts.googleapis.com/css?family=Lato:100,300,400">
</head>

现在我们页面中已经可以使用Lato字体了。现在我们将其添加到<body>元素的font属性中作为我们的主字体。
我们将Lato字体添加到字体堆栈的最前面："Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif。
虽然 Lato是个单词，但由于它是嵌入字体，所以我们需要用引号将它包起来。修改后的<body>元素样式如下所示：

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

Lato 字体运行后“样式讨论会”网站的文本样式都会被更新。接下来我们来看一看logo模块。
在logo选择器中，首先添加text-weight:100将文字调整到极细，再添加text-transform:uppercase将所有字母转为大写。最后设置letter-spacing:.5px使字母间距扩大。
修改后样式如下所示：

.logo {
  border-top: 4px solid #648880;
  float: left;
  font-size: 48px;
  font-weight: 100;
  letter-spacing: .5px;
  line-height: 44px;
  padding: 40px 0 22px 0;
  text-transform: uppercase;
}

因为font-weight:100是有效的，所以我们可以将导航模块中所有的段落文本都设置成这个粗细。还是在现有的选择器中添加，代码如下所示：

.hero p {
  font-size: 24px;
  font-weight: 100;
}

在这节课中我们为“样式讨论会”网站做了很大的改进，它的界面开始真正大放异彩。

演示源代码

这是练习的源代码。在线预览或点击下载

引用

线上写作有时会涉及引用不同的来源或引用。所有不同的引用都可以用HTML中的<cite>，<q>，<blockquote>涵盖。由于它们通常都与正常文本的样式有所区别，所以我们就在这节课中讨论它们。

虽然需要很多练习才能够掌握如何使用正确的元素和属性来标记引用，但大多数时候，我们都可以遵循以下规则：

<cite>:用于引用原创作品，作者或者资源。
<q>：用于简短的内联引语。
<blockquote>：用于较长的外部引用。

引用原创作品

行内元素<cite>在HTML中专门用于引用原创作品。这个元素必须包含作品标题，作者名或者作品链接。<cite>元素中的文本浏览器默认显示为斜体。

若有需要，可以在元素中添加一个超链接元素用以链接引用的原始来源。

以下例子中，是一本由 Walter Isaacson 所著的名为 Steve Jobs 的书。我们将书名包含在<cite>元素中，引用中设置了这本书的超链接：

<p>The book <cite><a href="http://www.amazon.com/Steve-Jobs-Walter-Isaacson/dp/1451648537">Steve Jobs</a></cite> is truly inspirational.</p>

直接引用

很多时候我们都会在文本中引用对话或文章。这时候我们就要应用行内元素<q>。<q>元素语义上就是引用对话或文章，所以它不应该用于其他目的。

默认情况下，浏览器在渲染这个元素时会根据全局属性lang识别对应的语言，添加适当的引号。

示例如下：

<p>Steve Jobs once said, <q>One home run is much better than two doubles.</q></p>

间接引用

<q>元素有一个cite属性。cite属性的作用是引用已引用的内容的URL。这个属性不会改变元素的外观，但这对于屏幕阅读器和其他设备来说很有用。因为这个属性并不可见，所以最好在引用内容前前设置超链接标明来源。

示例如下：

<p><a href="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">Steve Jobs</a> once said, <q cite="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">One home run is much better than two doubles.</q></p>

直接外部引用

如果我们要引用来自外部的多行的大块文本，就要用到<blockquote>元素。<blockquote> 是一个块状元素，可以内嵌块状元素，包括各级标题和段落标签。

示例如下：

<blockquote>
  <p>&#8220;In most people&#8217;s vocabularies, design is a veneer. It&#8217;s interior decorating. It&#8217;s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.&#8221;</p>
</blockquote>

间接外部引用

较长的引用通常都会通过<blockquote>元素进行间接引用。这种引用可能会包含cite属性和<cite>元素。

cite属性用在<blockquote>元素中和用在<q>元素中的方法相同----以URL的形式提供引用内容的引用。<cite>元素跟在实际引用内容之后，用以标明引用内容的原始来源。

示例中HTML概述了 Fortune 杂志中对 Steve Jobs 的一段话的引用。这段引用使用了<blockquote>元素并通过cite属性指定了原始来源。<blockquote>元素中还嵌套了包含<a>元素的<cite>元素为用户提供额外的引用和参考。

<blockquote cite="http://money.cnn.com/magazines/fortune/fortune_archive/2000/01/24/272277/index.htm">
  <p>&#8220;In most people&#8217;s vocabularies, design is a veneer. It&#8217;s interior decorating. It&#8217;s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.&#8221;</p>
  <p><cite>&#8212; Steve Jobs in <a href="http://money.cnn.com/ magazines/fortune/fortune_archive/2000/01/24/272277/index.htm"> Fortune Magazine</a></cite></p>
</blockquote>

总结

学习怎样版文本的样式令人兴奋，因为我们的内容可以开始传达一些情感。我们也可以开始使我们的内容具有层次结构，让我们的网站更清晰易读。

快速的回顾一下我们这节课所学的内容：

给文本添加颜色以突出文本
基于文字的属性：font-family，font-size，font-style，font-weight 等。
基于文本的属性：text-align，text-decoration，text-indent，text-shadow 等。
什么是网络安全字体以及如何嵌入我们自己的网络字体。
如何标记间接引用和直接引用

调整我们的文字和排版使我们的设计更具魔力。接下来我们将通过背景和渐变为我们的网站带来更多色彩。

文章来源

https://learn.shayhowe.com/html-css/working-with-typography

[译]HTML&CSS Lesson6: 排版

设置字体颜色

设置字体属性

字体类型

字体大小

字体样式

字体转化

文字粗细

行高

简写文字属性

练习

设置文本属性

文本对齐方式

文本修饰

文本缩进

文本阴影

字母（文字）间距

单词间距

使用所有的文本属性

练习

使用网络安全字体

嵌入网络字体

练习

演示源代码

引用

引用原创作品

直接引用

间接引用

直接外部引用

间接外部引用

总结

文章来源

龙猫猫

引用和评论

[译]HTML&CSS Lesson8: 列表

网页设计的垂直居中

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

Jerry和您聊聊Chrome开发者工具