@font-face 定義字型

@font-face 是 CSS 裡「定義字型」的規則 ( 功能 )，除了可以自訂字型名稱，更能將指定的字型和樣式，綁定到自訂的字型名稱，讓字型的運用更佳方便彈性，這篇教學會介紹如何使用 @font-face，以及透過 @font-face 的 unicode-range 屬性，讓特定的字元套用特定的字體。

快速導覽：

• @font-face 基本用法
• 設定多組字型
• 指定字型格式
• 加入字型樣式屬性
• unicode-range 特定字元套用特定字體
• JavaScript 添加 @font-face

@font-face 基本用法

@font-face 是 CSS 裡「定義字型」的規則 ( 功能 )，透過 @font-face 可以載入外部字體，並定義自訂名稱的字型與樣式，幾乎所有提供外部字型的服務，都是使用 @font-face 定義字型。

@font-face 的使用方式很簡單，基本只需要兩個必要屬性就能定義字型：

下方的範例會定義 oxxo1、oxxo2 和 oxxo3 三種字型，分別將字型對應到作業系統的 Impact 字型和兩個 Google Fonts 字型，接著讓三個 div 分別使用自訂的字型名稱，內容文字套用指定字型。

參考：使用通用字型、使用外部字型。

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

<!-- HTML 程式碼 -->
<div class="a">hello oxxo, Good morning!!</div>
<div class="b">hello oxxo, Good morning!!</div>
<div class="c">hello oxxo, Good morning!!</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 250px;
    padding : 10px;
    margin: 5px;
  }
  @font-face {
    font-family: "oxxo1";
    src: local("Impact");   /* 系統字型 Impact */
  }
  @font-face {
    font-family: "oxxo2";
    src: url("https://fonts.gstatic.com/s/exo2/v21/7cH1v4okm5zmbvwkAx_sfcEuiD8jvvKsOdC_jJ7bpAhL.woff2");
  }
  @font-face {
    font-family: "oxxo3";
    src: url("https://fonts.gstatic.com/s/librebarcode128text/v28/fdNv9tubt3ZEnz1Gu3I4-zppwZ9CWZ16Z0w5QVrS6e1304g.woff2");
  }
  .a {
    font-family: "oxxo1";   /* 使用 oxxo1 字型 */
  }
  .b {
    font-family: "oxxo2";   /* 使用 oxxo2 字型 */
  }
  .c {
    font-family: "oxxo3";   /* 使用 oxxo3 字型 */
  }
</style>

設定多組字型

@font-face 可以將一個字型名稱對應到多組字型，在 src 裡用逗號「,」分隔字型名稱，就可以設定多組字型，多組字型預設使用「第一組」，如果遇到無法載入字型的狀況，就會自動使用下一個順位的字型。

下方範例的第一組字型是假的字型 ( 所以會載入失敗 )，這時就會自動套用第二組字型。

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

<!-- HTML 程式碼 -->
<div class="a">hello oxxo, Good morning!!</div>
<div class="b">hello oxxo, Good morning!!</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 250px;
    padding : 10px;
    margin: 5px;
  }
  @font-face {
    font-family: "oxxo1";
    src: url("我是假的啦"),
      local("Impact");
  }
  @font-face {
    font-family: "oxxo2";
    src: url("我是假的啦"),
      url("https://fonts.gstatic.com/s/librebarcode128text/v28/fdNv9tubt3ZEnz1Gu3I4-zppwZ9CWZ16Z0w5QVrS6e1304g.woff2");
  }
  .a {
    font-family: "oxxo1";
  }
  .b {
    font-family: "oxxo2";
  }
</style>

指定字型格式

@font-face 在字型網址後方，使用 format() 額外指定該字型的「格式」，雖然這不是必須的功能，但指定格式可以讓作業系統優先判斷需要使用的字型，快速跳過不支援的字型，避免載入後發現不支援，再去讀取第二順位字體的狀況。

常見的字型如下：

下方範例會載入多種字型，並額外指定字型格式：

@font-face {
  font-family: "oxxo1";
  src: url("/fonts/Chocolate-Classical-Sans.woff2") format("woff2"),
    url("/fonts/Libre-Barcode-Text.otf") format("opentype");
} 

加入字型樣式屬性

@font-face 除了最基本的 font-family 和 src 屬性，還可以針對特定的字型名稱，加入字型樣式屬性，下方列出 @font-face 支援的樣式屬性。

需要注意的是，位於 @font-face 裡的樣式屬性是「識別」用的「描述子」，主要作用於「區分樣式不同的同一種字型」，並不會套用到真正的樣式，舉例來說，開啟一組 Google Fonts 的外部字型 ( 字體連結 )，在字型的定義檔裡，雖然都是同樣的檔名，但不同的樣式屬性，卻會對應到不同的字型網址。

許多字型檔案都會額外設計粗體、細體、斜體等樣式，方便使用者在不同情境下使用。

下方的範例會使用三個 @font-face 設定三個名稱都是 oxxo 的字型，雖然名稱相同，但對應的 font-weight 和 src 都不同，因此在套用字型時，如果使用「同樣名稱但不同 font-weight」，就會自動套用不同的字型。

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

<!-- HTML 程式碼 -->
<div class="a">hello oxxo, Good morning!!</div>
<div class="b">hello oxxo, Good morning!!</div>
<div class="c">hello oxxo, Good morning!!</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    width: 250px;
    padding : 10px;
    margin:5px;
  }
  @font-face {
    font-family: "oxxo";
    font-weight: 300;     /* 300 的粗細對應到 Impact 字型 */
    src: local("Impact");
  }
  @font-face {
    font-family: "oxxo";
    font-weight: 200;     /* 200 的粗細對應到 Verdana 字型 */
    src: local("Verdana");
  }
  @font-face {
    font-family: "oxxo";
    font-weight: 100;     /* 100 的粗細對應到 Courier 字型 */
    src: local("Courier");
  }
  .a {
    font-family: "oxxo";
    font-weight: 300;     /* 套用 Impact 字型 */
  }
  .b {
    font-family: "oxxo";
    font-weight: 200;     /* 套用 Verdana 字型 */
  }
  .c {
    font-family: "oxxo";
    font-weight: 100;     /* 套用 Courier 字型 */
  }
</style>

unicode-range 特定字元套用特定字體

@font-face 裡的樣式屬性主要都是作為篩選字型的「描述子」，unicode-range 也不例外，但 unicode-range 是一個相當特別的樣式屬性，它可以「限定一段文字 unicode 的區間，並將該區間的文字套用指定的字型」，這也是許多支援「多國語系」字型常用的做法，。

參考：Unicode 字元列表、Unicode 區段

下方的範例開啟後，大寫英文字母會套用 Verdana 字型，小寫英文字母會套用 Courier 字型，數字則會套用 Impact 字型。

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

<!-- HTML 程式碼 -->
<div>ABCDEFG abcdefg 12345678</div>

<!-- CSS 程式碼 -->
<style>
  @font-face {
    font-family: "oxxo";
    src: local("Impact");
    unicode-range: U+0030-0039;  /* 數字 unicode 區間 */
  }
  @font-face {
    font-family: "oxxo";
    src: local("Verdana");
    unicode-range: U+0041-0057;  /* 大寫英文字母 unicode 區間 */
  }
  @font-face {
    font-family: "oxxo";
    src: local("Courier");
    unicode-range: U+0061-007A;  /* 小寫英文字母 unicode 區間 */
  }
  div {
    font-family: "oxxo";
    border: 1px solid #000;
    padding : 10px;
    margin: 5px;
  }
</style>

如果要查詢中文的 Unicode，除了從區段區分，也可以參考教育部全字庫的資源：單字及字串查詢，開啟網頁後輸入中文，就能查詢這個中文字的 Unicode，下方的畫面是查詢「讚」這個字。

知道「讚」的 Unicode 之後，就能運用 unicode-range 限定區間，讓「讚」套用特定字型。

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

<!-- HTML 程式碼 -->
<div>我就讚</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding : 10px;
    margin:5px;
    font-size: 30px;
    font-family: "oxxo";
  }
  @font-face {
    font-family: "oxxo";
    src: url("https://fonts.gstatic.com/s/delagothicone/v15/hESp6XxvMDRA-2eD0lXpDa6QkBAGQEsPQAgBRQGhdlWTf4ifQMmxfTPxmI8D_A6A.15.woff2");
    unicode-range: U+8b9a;
  }
</style>

小結

@font-face 是定義字型或進階字型應用的必備功能，透過 @font-face 的操作，就能讓字型更加彈性又好用，甚至還可以限制某一區段的文字套用特定樣式，是非常方便的功能。

意見回饋

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