使用通用字型

定義字型是網頁排版中十分重要卻也常被忽略的功能，這篇教學會介紹如何透過 CSS 的 font-family 使用通用字型，包含 serif ( 襯線字型 )、sans-serif ( 無襯線字型 )、monospace ( 等寬字型 )、cursive ( 手寫字型 ) 和 fantasy ( 奇幻字型 )。

使用外部字型參考：使用外部字型

快速導覽：

• 什麼是通用字型？
• 使用 font-family
• serif ( 襯線字型 ) 與 sans-serif ( 無襯線字型 )
• monospace ( 等寬字型 )
• cursive ( 手寫字型 )
• fantasy ( 奇幻字型 )

什麼是通用字型？

通用字型 ( generic-family ) 泛指是「作業系統的預設字型」或「瀏覽器的預設字型」，只要使用對應的關鍵字就能套用對應字型，CSS 支援的通用字型有五種名稱：

使用 font-family

CSS 的樣式屬性 font-family 可以載入任何可用的字型，使用時只需要設定 family-name ( 字體名稱 ) 即可，下方列出相關使用説明：

• font-family 可以設定一種字型或多種不同的字型，每種字型用半形逗號「,」隔開。

• 瀏覽器載入網頁樣式時，會從「左到右」套用字型，只要遇到可用的字型就會先套用，並忽略右方尚未套用的字型。

• 為了避免沒有可正確使用的字型，通常會將「通用字型」放在字型最末端，且只會使用「一種」通用字型 ( 只要遇到通用字型就一定會套用，永遠不會套用第二順位的通用字型 )。

• 字型名稱「不一定需要」加上雙引號或單引號，但如果字型名稱裡包含「空格」，就「一定要加上」雙引號或單引號。

body {
  font-family: "第一種字體", "第二種字體", "第三種 字體", "通用字";
} 

下方的範例會使用 font-family 將三個 div 分別套用不同的字型，其中第一個和第四個 div 載入了一個不存在的字型名稱 oxxo，套用字型時因為無法正確套用，會繼續選擇第二個 Times 字體套用，或使用預設通用字型的 serif 襯線字型。

線上展示：https://codepen.io/oxxo/pen/XWwRwEd

<!-- HTML 程式碼 -->
<div class="a">Apple</div>
<div class="b">Apple</div>
<div class="c">Apple</div>
<div class="d">Apple</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 150px;
    height: 60px;
    margin: 5px;
    font-size: 50px;
    float: left;
  }
  .a {
    font-family: "oxxo", "Times", sans-serif;   /* 找不到 oxxo，套用 Times */
  }
  .b {
    font-family: "Impact", sans-serif;          /* 套用 Impact */
  }
  .c {
    font-family: "Comic Sans MS", sans-serif;   /* 套用 Comic Sans MS */
  }
  .d {
    font-family: "oxxo", serif;                 /* 找不到 oxxo，套用 serif */
  }
</style>

serif ( 襯線字型 ) 與 sans-serif ( 無襯線字型 )

serif ( 襯線 ) 指的是字型筆畫末端的「裝飾」，sans 在法語中代表「無」，sans-serif 就表示為無襯線字型，與襯線字型相反，無襯線體完全拋棄裝飾襯線，只剩下主幹，造型簡明有力，更具現代感，很適用於標題或廣告，由於部分中文字型會保留書法的筆觸，因此襯線字型比較適合英文，下圖文字「紅色的部分」就是襯線。

作業系統常用的 serif 襯線字型：Arial、Arial Black、Arial Narrow、Charcoal、Geneva、Impact、Trebuchet MS、Tahoma、Verdana。

body {
  font-family: "Arial";  /* 使用 Airal 襯線字型 */
}
body {
  font-family: serif;    /* 使用系統預設襯線字型 */
}

作業系統常用的 sans-serif 無襯線字型：Georgia、Palatino、Times New Roman、Times。

body {
  font-family: "Georgia";    /* 使用 Georgia 無襯線字型 */
}
body {
  font-family: sans-serif;   /* 使用通用字型：系統預設無襯線字型 */
}

monospace ( 等寬字型 )

等寬字型表示所有的字母、數字都是「同樣的寬度」，對於中文而言，每個字在設計上多都是等寬，但英文字母的寬度就存在極大的差異 ( 例如 W、i、l 的寬度非常不同 )，這也造成排版上的一些困擾，因此如果指定 monospace 字型，就會自動套用系統預設的等寬字型，每個字母、標點符號與空白的寬度都會相同，許多呈現程式碼的頁面，也會將程式碼設定成等寬字型，下圖黑色字型為等寬字型。

作業系統常用的 monospace 等寬字型：Courier、Courier New。

body {
  font-family: "Courier";    /* 使用 Courier 等寬字型 */
}
body {
  font-family: monospace;   /* 使用通用字型：系統預設等寬字型 */
}

cursive ( 手寫字型 )

cursive 手寫字型使用大量的曲線或類似襯線的裝飾，讓文字更接近「手寫」或「草書」的風格，作業系統常用的 cursive 手寫字型為：Comic Sans ( 或 Comic Sans MS )。

body {
  font-family: "Comic Sans MS";   /* 使用 Comic Sans MS 手寫字型 */
}
body {
  font-family: cursive;   /* 使用通用字型：系統預設手寫字型 */
}

fantasy ( 奇幻字型 )

fantasy 奇幻字型和手寫字型有點類似，基本上只要不屬於上述四種類型的字型，都會被定義為 fantasy，作業系統常用的 fantasy 奇幻字型為：Copperplate、Papyrus。

body {
  font-family: "Copperplate";   /* 使用 Copperplate 奇幻字型 */
}
body {
  font-family: fantasy;   /* 使用通用字型：系統預設奇幻字型 */
}

小結

大多數情況下，只要使用預設的字型就能做出很好看的網頁，因此 font-family 就是非常基本運用字型的作法，透過這篇教學的介紹，相信大家可以完整掌握各種通用字型，並且將其活用在自己的網頁裡。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～