[译]HTML&CSS Lesson6: 排版

时间 2019-12-05

标签 html&css html css lesson6 lesson 排版栏目 CSS 繁體版

原文原文链接

随着时间的推移，网络字体排版已经获得了很大的发展。有几个不一样的因素导致它的流行。其中被最普遍承认的因素是可嵌入咱们本身的网络字体的系统的开发。css

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

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

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

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

字型‘typeface’表示咱们看到的。它是文字的外观、感受和阅读的艺术印象。浏览器

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

咱们能够分别将它们比做一首歌和一个MP3，字型‘typeface’就相似于一首歌，只不过它是美术做品。而字体‘font’就相似于MP3，但它自己并不带有艺术印象，只是一个传递艺术的媒介。服务器

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

设置字体颜色

咱们在建立网站时一般会设置一个主字体及其颜色。虽然有不少例如字体大小、粗细等属性能够设置，但对页面视觉效果影响最大的仍是其字型和颜色。用咱们自定义的字体和颜色覆盖浏览器的默认值，能够当即奠基咱们页面的基调风格。ide

设置字体颜色的属性为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