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

隨著時(shí)間的推移，網(wǎng)絡(luò)字體排版已經(jīng)得到了很大的發(fā)展。有幾個(gè)不同的因素致使它的流行。其中被最廣泛認(rèn)可的因素是可嵌入我們自己的網(wǎng)絡(luò)字體的系統(tǒng)的開發(fā)。

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

雖然嵌入字體的開發(fā)使我們能夠使用無數(shù)的新字體，但了解字體排版的基本原則還是必不可少的。在這節(jié)課中，我們將帶領(lǐng)大家了解這些基本原則，并將它們應(yīng)用到我們的HTML和CSS中。

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

字型‘typeface’和字體‘font’經(jīng)常被互換，很容易混淆。在這里對(duì)它們實(shí)際的含義做一個(gè)講解。

字型‘typeface’表示我們看到的。它是文字的外觀、感覺和閱讀的藝術(shù)印象。

字體‘font’表示包含一個(gè)字型‘typeface’的文件，在電腦中安裝一個(gè)字體‘font’使電腦能夠獲取到這個(gè)字型‘typeface’。

我們可以分別將它們比作一首歌和一個(gè)MP3，字型‘typeface’就類似于一首歌，只不過它是美術(shù)作品。而字體‘font’就類似于MP3，但它本身并不帶有藝術(shù)印象，只是一個(gè)傳遞藝術(shù)的媒介。

譯者：我不會(huì)區(qū)分這兩個(gè)單詞的翻譯，正常情況我都會(huì)使用“字體”來翻譯它們，想要了解得更細(xì)致的讀者可以閱讀原文

我們?cè)趧?chuàng)建網(wǎng)站時(shí)通常會(huì)設(shè)置一個(gè)主字體及其顏色。雖然有很多例如字體大小、粗細(xì)等屬性可以設(shè)置，但對(duì)頁面視覺效果影響最大的還是其字型和顏色。用我們自定義的字體和顏色覆蓋瀏覽器的默認(rèn)值，可以立即奠定我們頁面的基調(diào)風(fēng)格。

設(shè)置字體顏色的屬性為color屬性。color屬性可以接受幾種不同格式的色值。這些格式我們有在第三節(jié)課HTML&CSS Lesson3: 了解CSS中提到，包括：關(guān)鍵字色值，十六進(jìn)制色值，RGB，RGBa和HSL，HSLa。十六進(jìn)制色值的使用是最普遍的，因?yàn)樗浅１憬荩浅？煽亍?/p>

以下例子是改變頁面中所有元素下的文本的顏色：

html {
  color: #555;
}

CSS 提供了很多屬性用于編輯頁面文本的樣式。這些屬性分為兩類：基于文字的屬性和基于文本的屬性。大部分的屬性都以font-*或text-*為前綴。接下來我們來了解一下基于文字的屬性。

font-family屬性用于聲明使用哪種字體——包括備選或替代字體——來顯示文本。font-family的屬性值可以同時(shí)包含多個(gè)字體名，用逗號(hào)隔開。

左邊開始第一個(gè)聲明的字體就是主字體，如果主字體不可用，則會(huì)按照從左到右的順序選用備選字體來代替。

當(dāng)字體名由多個(gè)詞組成時(shí)，需要用引號(hào)將它們包起來。另外，最后一個(gè)字體應(yīng)該指定系統(tǒng)默認(rèn)字體，比如最常用的sans-serif或serif.

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

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

在這個(gè)例子中，首先會(huì)選用Helvetica Neue字體，如果它不可用或者當(dāng)前設(shè)備并沒有安裝此字體，那么會(huì)按照順序選用下一個(gè)字體——Helvetica, 依次類推。

font-size屬性提供了使用常見長(zhǎng)度單位例如像素(px)，em，百分比(%)，點(diǎn)(pt)或關(guān)鍵字給文本設(shè)置字體大小的功能。

以下是將body元素的字體大小font-size設(shè)置為14像素：

body {
  font-size: 14px;
}

將文本變?yōu)樾斌w或者防止文本變?yōu)樾斌w，我們就要用到font-style屬性。font-style屬性接受四個(gè)關(guān)鍵字值：normal，italic，oblique和inherit。在這四個(gè)值中，我們最常用的就是italic(將文本設(shè)置為斜體)和normal(將文本恢復(fù)為正常樣式)。

以下是將class為special的元素的字體樣式font-style設(shè)置為斜體italic：

.special {
  font-style: italic;
}

這個(gè)屬性并不常用，只有偶爾需要將文本設(shè)置為小型大寫字母的情況下會(huì)到font-variant屬性。font-variant接受三個(gè)值:normal，small-caps和inherit。最常用的值就是normal和small-caps,將文本切換為正常模式或者轉(zhuǎn)換成小型大寫字母。

以下是將class為firm的元素的文本轉(zhuǎn)化為小型大寫字母：

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

偶爾我們會(huì)想將文字加粗或者設(shè)置到某個(gè)特定的粗細(xì)，這時(shí)候我們就要使用font-weight屬性。font-weight的值可以設(shè)置為關(guān)鍵字或數(shù)字。

關(guān)鍵字值有normal，bold，bolder，lighter和inherit。 在這些關(guān)鍵字值中，推薦使用normal和bold來設(shè)置字體的粗細(xì)，避免bolder或者lighter，最好使用數(shù)字值來完成更精準(zhǔn)的控制。

以下練習(xí)中，將class為daring的元素的字體粗細(xì)font-weight設(shè)置為bold加粗。

.daring {
  font-weight: bold;
}

數(shù)字值100，200，300，400，500，600，700 和900可以更精準(zhǔn)的設(shè)置文字的粗細(xì)。文字從最細(xì)的100，按比例放大到最粗的900。參考了一下，關(guān)鍵字normal映射到400，關(guān)鍵字bold映射到700。因此任何低于400的值會(huì)顯得更細(xì)，而高于700的值會(huì)顯得更粗。

將class為daring的font-weight設(shè)置為600后，文本看起來加粗了，但不像bold那么粗：

.daring {
  font-weight: 600;
}

文字粗細(xì)

在使用數(shù)字值之前，我們需要確認(rèn)當(dāng)前字體是否支持我們想要的字體粗細(xì)。若不支持，那么這個(gè)粗細(xì)值就會(huì)默認(rèn)為最接近它的有效值。

例如， Times New Roman字體有兩種粗細(xì)：normal(400)和bold(700)，若嘗試把字體粗細(xì)設(shè)置為900將會(huì)默認(rèn)變?yōu)樽罱咏?b>700

行高使用line-height屬性聲明，表示兩行文本之間的距離。line-height 接受所有常規(guī)長(zhǎng)度值，長(zhǎng)度單位我們?cè)诘谌n中有提到：了解CSS。

可讀性最佳的方案是將line-height設(shè)置為font-size的1.5倍。我們可以通過將line-height設(shè)置為150%或1.5來快速實(shí)現(xiàn)。但如果文本有基準(zhǔn)線，則用像素px來控制line-height會(huì)更合適。

以下例子中，我們把body元素中的行高line-height設(shè)置成22px：

body {
  line-height: 22px;
}

行高也可以為單行文本的元素設(shè)置上下居中。將line-height和height的屬性值設(shè)置成相同值就可以實(shí)現(xiàn)：

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

這種用法常見于按鈕，彈出信息框，以及其他單行文本的塊中。

以上列出的文字屬性可以合并成一個(gè)font屬性及其簡(jiǎn)寫值。font屬性接受多個(gè)基于文字的屬性的值。這些值的排序如下所示，從左到右依次為：font-style， font-variant，font-weight，font-size， line-height和 font-family。

作為一個(gè)簡(jiǎn)寫值，屬性值之間并不需要用逗號(hào)隔開(除了文字名，也就是font-family的多個(gè)值之間需要用逗號(hào))。但font-size和line-height屬性值之間需要用斜杠/隔開。

當(dāng)使用簡(jiǎn)寫值時(shí)，除了font-size和font-family是必寫值，其他值都是可選的。也就是說，我們可以按需求只寫font-size和font-family的屬性值。

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

使用所有的字體屬性

我們來看一個(gè)使用所有的字體屬性的例子。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。 偽類是可以添加到選擇器后用以調(diào)整元素某種狀態(tài)下樣式的關(guān)鍵字選擇器。

:hover是用戶把鼠標(biāo)懸浮在某元素上時(shí)改變其樣式的選擇器。 上述中我們把它用在元素上，可以到看所有的元素在鼠標(biāo)懸停時(shí)字體顏色都會(huì)發(fā)生改變。

/*
  ========================================
  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會(huì)相對(duì)較大，所以它們的line-height也要調(diào)整以保證文字正常清晰顯示。這里我們將line-height值設(shè)置為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;
}

元素相對(duì)其他標(biāo)題元素會(huì)更特別一點(diǎn)，所以我們要修改一些樣式。

我們?yōu)檫@些元素設(shè)置一個(gè)不一樣的color值和一個(gè)更小的font-size，同時(shí)也把`font-weight設(shè)置為400或者normal。

瀏覽器在渲染標(biāo)題元素時(shí)是默認(rèn)加粗的，而我的標(biāo)題元素目前的font-weight為300。我們首先在main.css最上面重置了樣式，將標(biāo)題元素的font-weight設(shè)置為了normal，然后又在元素選擇器中將font-weight設(shè)置為了300。

元素的font-weight設(shè)置為了400會(huì)使這個(gè)標(biāo)題的文本看起來更粗一些。

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

在樣式表最開始我們重置了瀏覽器默認(rèn)樣式。而現(xiàn)在我們要為，和再重新設(shè)置樣式。我們將元素的font-weight設(shè)置為400或normal，這相對(duì)來說比大部分文本都粗一些。接著我們將和元素的font-style設(shè)置為italic。

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

接著我們來調(diào)整元素的樣式。目前瀏覽器默認(rèn)為藍(lán)色，我們要把它改成和

到

元素一致的顏色。另外，我們將鼠標(biāo)懸浮在上時(shí)的:hover狀態(tài)的color改為淺灰色。

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

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

下面我們來更新

元素的樣式。我們?cè)?b>.logo選擇器中添加font-size和line-height，添加到現(xiàn)有的border-top，float，andpadding屬性之間。

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

因?yàn)槲覀冊(cè)龃罅?b>.logo選擇器元素的大小，所以我們要增加

元素中的

元素的margin屬性以保持平衡。我們先為

元素添加一個(gè)class tagline用以設(shè)置外邊距margin。

以下我們是要修改的內(nèi)容，需要應(yīng)用到每個(gè)頁面中：

HTML

August 24–26th — Chicago, IL

CSS

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

做完這些之后，我們?yōu)?b>