设定字型 ( font-family )

定义字型是网页排版中十分重要却也常被忽略的功能，这篇教学会介绍如何透过 CSS 的 font-family 使用通用字型，包含 serif ( 衬线字型 )、sans-serif ( 无衬线字型 )、monospace ( 等宽字型 )、cursive ( 手写字型 ) 和 fantasy ( 奇幻字型 )。

• 字型定义参考：@font-face 定义字型
• 使用外部字型参考：使用外部字型

快速导览：

• 什么是通用字型？
• 使用 font-family 设定字体
• serif ( 衬线字型 ) 与 sans-serif ( 无衬线字型 )
• monospace ( 等宽字型 )
• cursive ( 手写字型 )
• fantasy ( 奇幻字型 )

教学影片

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

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

什么是通用字型？

通用字型 ( 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 衬线字型：Georgia、Palatino、Times New Roman、Times。

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

操作系统常用的 sans-serif 无衬线字型：Arial、Arial Black、Arial Narrow、Charcoal、Geneva、Impact、Trebuchet MS、Tahoma、Verdana。

body {
  font-family: "Arial";  /* 使用 Airal 無襯線字型 */
}
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 就是非常基本运用字型的作法，透过这篇教学的介绍，相信大家可以完整掌握各种通用字型，并且将其活用在自己的网页里。

意见反馈