摘要：有幾個不同的因素致使它的流行。在這四個值中，我們最常用的就是將文本設置為斜體和將文本恢復為正常樣式。因此任何低于的值會顯得更細，而高于的值會顯得更粗。目前瀏覽器默認為藍色，我們要把它改成和到元素一致的顏色。

隨著時間的推移，網絡字體排版已經得到了很大的發展。有幾個不同的因素致使它的流行。其中被最廣泛認可的因素是可嵌入我們自己的網絡字體的系統的開發。

過去我們只能在網站中使用少量的字體。這些字體都是電腦中最常用的，所以它們最可能在屏幕上正常顯示。如果一個字體沒有安裝在電腦中，那么網頁上就不能正常顯示。現在隨著嵌入字體的發展，我們有了更多的字體選擇空間，包括那些我們添加到網站中的字體。

雖然嵌入字體的開發使我們能夠使用無數的新字體，但了解字體排版的基本原則還是必不可少的。在這節課中，我們將帶領大家了解這些基本原則，并將它們應用到我們的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;
}

做完這些之后，我們為