什麼是Font Stack?

Font Stack是CSS font-family的一個字體清單,以使用者滿意度來排序。Font Stack支援網頁字體設定,因此無需透過電腦安裝。

Font Stack語法

那麼,Font Stack的語法是長什麼樣子呢? 下面舉一個例子。

body {
font-family:Georgia, "Times New Roman", serif; 
}

使用Font Stack語法時有些需要注意的事項。

字體名稱用逗號隔開

你可以添加任意字體,注意字體間用逗號隔開即可。瀏覽器一般都會嘗試載入首個字體,若首個字體載入失敗,則開始載入第二個,依次類推,直到瀏覽器找到能成功載入的字體為止。

操作原理就是使用網路安全字體,網站訪問者的電腦很可能有Georgia字體。如果沒有,瀏覽器將載入下一個字體”Times New Roman”。

多個字組成的字體名稱要用引號標註

諸如Times New Roman、Trebuchet MS、Courier New等字體需要雙引號,以便瀏覽器知道每個字體名稱中的英文字是一起的。

單一Font Stack通常以一個通用的字體來分類(比如有襯線或無襯線)

在這種情況下,載入有襯線字體會告訴瀏覽器,如果Font Stack中的特定字體不可用,那麼至少要使用屬於這個類別的字體。

例如,如果你正在使用無襯線字體,例如Arial和Verdana字體,無襯線字體分類會是確定載入選項。至少當你指定的字體不能使用時,下一個被載入使用的字體至少屬於這個類別。

 

Font Stack和網路字體

如今,網站所使用的網路字體要麼與其他資源,像是圖片、Javascript檔等一起包含在網站上,要麼是連結到一個字體庫,比如Google Fonts或Typekit。

儘管這些字體的載入應該沒有任何問題,但使用Font Stack確實比使用這些外接網站要更穩定。

網路安全字體也是同理,這些字體大多都已經安裝在電腦作業系統中,像是這篇提過的所有字體都屬於網路安全字體。

儘管可能性很低,但為了防止網站字體丟失,指定一個Font Stack更方便網站設計排版。

 

排版設計中的CSS

一般網頁設計師或網站開發人員都很喜歡網站裡放各種圖片,當然使用者也喜歡有許多圖片的網站,因為看起來很豐富。

但對於搜尋引擎來說,它們更依賴爬尋書面文字,因此網頁排版設計極為重要,我們需要確保網站既具備吸引力,也能讓搜尋引擎容易索引和讀取。

因此在現代網頁設計中,都會使用CSS(階層式樣式表)來實現管理網站樣是,並搭配HTML的網頁結構來開發網站。