《HTML5+CSS3網頁設計入門必讀》——6.3 調整字型

本節書摘來自異步社群《html5+css3網頁設計入門必讀》一書中的第6章，第6.3節,作者： 【美】julie meloni更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

有時，你可能想對文本的大小和外觀進行更多一點控制，而不僅僅是将其設定為粗體或斜體。在我深入讨論使用css調整字型的合适方式之前，讓我們簡要探讨在css出現之前是怎樣操作的：當你檢視其他web站點的源代碼時，仍有可能發現這種方法的一些示例。記住，僅僅由于這些老方法仍在使用并不意味着你應該如法炮制。

在樣式表投入使用之前，現在被逐漸淘汰的标簽用于控制web頁面文本中的字型。

注意：

我不能充分強調标簽将不會被使用！這裡僅僅出于示範和曆史目的而使用它。

例如，曾經使用下面的html代碼更改頁面上的一些文本的大小和顔色：

可以看到，< font >标簽的size和color屬性使得可以不用太費力地改變文本的字型。盡管這種方法工作得很好，但是由于css樣式規則，它已經被一種更進階的字型格式化方法所取代。下面給出了幾種用于控制字型的主要的樣式規則。

font-family：設定字型系列（字形）。

font-size：設定字型的大小。

color：設定字型的顔色。

font-family樣式規則允許設定用于顯示文本的字形。你可以（并且通常應該）為這個樣式指定多個值（用逗号隔開），使得如果使用者系統上的第一種字型不可用，那麼浏覽器将可以嘗試一種替代字型。

在第7章中将學習關于控制頁面上的文本顔色的更多知識。該章還将說明如何建立你自己的自定義顔色，以及控制文本連結的顔色。

提供替代字型系列很重要，因為每個使用者都可能會安裝不同的字型集，至少會超越常用的基本核心字型集（如arial、times new roman等）。通過提供替代字型清單，當無法找到理想的字型時，就有更好的機會使頁面優雅地轉而依靠一種已知的字型。下面給出了一個font-family樣式的示例，它用于設定一個文本段落的字形：

這個示例具有幾個有趣的部分。第一，将arial指定為主字型。大小寫不影響字型系列，是以arial與arial或arial沒有什麼不同。關于這段代碼的另一個有趣的方面是：字型名稱“times roman”是用單引号包覆的，因為它中間有一個空格。不過，由于'times roman'出現在sans-serif的通用規範之後，将不太可能使用它。由于sans-serif位于第二個位置，是以它告訴浏覽器：“如果這台機器上沒有安裝arial，那麼就使用預設的sans-serif字型。”

font-size和color樣式規則也常用于控制字型的大小和顔色。font-size樣式可以設定為一種預先定義的大小（如small、medium或large）；color則可以設定為一種預先定義的顔色（如white、black、blue、red或green），或者可以把它設定為一種特定的十六進制顔色（如#ffb499）。下面是前一個段落示例的更好版本，并且指定了字型大小和顔色：

程式清單6.3中的示例web内容以及如圖6.3所示的結果，使用了一些字型樣式規則來建立一份基本的線上履歷的開始部分。

在第7章将學習十六進制顔色。目前，隻需了解color樣式規則允許指定精确的顔色，而不僅僅是使用green、blue、orange等。

程式清單6.3 使用字型樣式規則建立基本的履歷

https://yqfile.alicdn.com/2aeec397b7612c8ee10135f0f3e547c6f96772d6.png" >

使用css，如你在第3章中所學到的，它把樣式集組織成類，可以看到文本格式化是如何應用于這段内容的不同區域的。如果密切檢視div.indented類的定義，将會看到margin-left樣式的使用。這個樣式對元素的左邊應用一定的空間量（在這個示例中是25像素），這個空間将導緻圖6.3中所示的縮進效果。