定义字型 ( @font-face )

@font-face 是 CSS 里“定义字型”的规则 ( 功能 )，除了可以自订字型名称，更能将指定的字型和样式，绑定到自订的字型名称，让字型的运用更佳方便弹性，这篇教学会介绍如何使用 @font-face，以及透过 @font-face 的 unicode-range 属性，让特定的字元套用特定的字体。

快速导览：

• @font-face 基本用法
• 设定多组字型
• 指定字型格式
• 加入字型样式属性
• unicode-range 特定字元套用特定字体

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

@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 的操作，就能让字型更加弹性又好用，甚至还可以限制某一区段的文字套用特定样式，是非常方便的功能。

意见反馈