雖然圖片在網站上獲得了很大的愛，但它是一種吸引搜索引擎並且傳播大多數網站內容的文字。 因此，印刷設計是網站設計中至關重要的一部分。 隨著網站文本的重要性，需要確保它看起來不錯並且易於閱讀。 這是通過CSS（層疊樣式表）樣式完成的。
遵循現代網頁設計標準，當你想口授網站文本內容的外觀時，你將使用CSS來完成。 這將CSS樣式從頁面的HTML結構中分離出來。 例如，如果您想將頁面的字體設置為“Arial”，則可以通過將以下樣式規則添加到CSS中來實現（請注意 - 這可能會在外部CSS樣式表中完成，為網站上的每一頁）：
body {font-family：Arial; }該字體是為“body”設置的，因此CSS級聯會將樣式應用於頁面的所有其他元素。 這是因為每個其他HTML元素都是“body”元素的子元素，CSS樣式（如字體系列或顏色）將從父元素級聯到子元素。 除非為特定元素添加更具體的樣式，否則將是這種情況。 這個CSS唯一的問題是只指定一個字體。 如果由於某種原因無法找到該字體，瀏覽器將替換其他字體。 這很糟糕，因為你無法控制使用什麼字體 - 瀏覽器會為你選擇，你可能不喜歡它決定使用的東西！ 這是一個字體棧來的地方。
字體堆棧是CSS font-family聲明中的字體列表。 字體按優先順序列出，以便在出現類似字體未加載的問題時，您希望它們出現在網站上。 字體堆棧允許設計人員控製網頁上字體的外觀，即使計算機沒有您要求的初始字體。
那麼字體堆棧看起來如何？ 這裡是一個例子：
body {font-family：Georgia，“Times New Roman”，serif; }這裡有幾件事要注意。
首先，你會看到我們用逗號分隔了不同的字體名稱。 每個人之間你可以添加盡可能多的字體，只要用逗號分隔即可。 瀏覽器將嘗試加載首先指定的第一個字體。 如果失敗了，它會在嘗試每種字體的行中運行，直到找到可以使用的字體。 在這個例子中，我們使用的是網絡安全字體，並且可能在訪問該網站的人的計算機上找到“Georgia”（注意 - 瀏覽器在您的計算機上查找頁面上指定的字體，所以該網站實際上是告訴從你的系統加載字體的計算機）。 如果由於某種原因沒有找到字體，它會向下移動堆棧並嘗試指定下一個字體。
關於下一個字體，請注意它是如何寫入堆棧的。 “Times New Roman”的名稱包含在雙引號中。 這是因為字體名稱有多個詞。 任何帶有多個單詞的字體名稱（Trebuchet MS，Courier New等）必須在雙引號中加上名稱，以便瀏覽器知道所有這些單詞都是一個字體名稱的一部分。
最後，我們用“serif”結束字體堆棧，這是一種通用的字體分類。 在不太可能的情況下，您的堆棧中已命名的字體都不可用，瀏覽器只會找到至少屬於您選擇的正確分類的字體。 例如，如果您使用的是Sans-serif字體（如Arial和Verdana），則結束使用“sans-serif”分類的字體堆棧時，至少會在整個系列中保留該字體（如果存在加載問題）。 無可否認，瀏覽器很難找到堆棧中列出的任何字體，而必須使用這種通用分類，無論如何，最好的做法是加入它，以確保雙重安全。
字體堆棧和Web字體
今天的許多網站使用網站中包含的網頁字體以及其他資源（如網站圖片，Javascript文件等），或者鏈接到異地字體位置，如Google Fonts或Typekit。 由於鏈接到文件本身時應加載這些字體，因此您仍然希望使用字體堆棧以確保您可以控制可能出現的任何問題。 同樣的事情適用於應該在某人電腦上的“網頁安全”字體（請注意，我們在本文中用作示例的字體，包括Arial，Verdana，Georgia和Times New Roman）都是Web安全字體，應該是在一個人的電腦上）。 儘管缺少字體的可能性非常低，但指定字體堆棧將盡可能地有助於防止網站的印刷設計 。
Jennifer Krynin的原創文章。 在8/9/17由Jeremy Girard編輯