使用外部字型

除了使用系统默认字型，进行网页设计时也常常会使用更多漂亮的“外部字型”，这篇教学会介绍 Google Fonts 外部字型服务，也会示范透过 CSS link 和 @import 和 @font-face 这三种方法加载外部字型。

使用通用字型参考：font-family 设定字型

快速导览：

• 使用 Google Fonts 作为外部字型来源
• 使用 CSS link 或 @import 加载外部字型
• 使用 @font-face 加载外部字型

教学影片

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

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

使用 Google Fonts 作为外部字型来源

Google Fonts 是 Google 提供的免费字型平台，可以从中选择想要的外部字型，将其下载使用或透过 API 直接连接使用，从下方网址可以前往 Google Fonts。

前往 Google Fonts：https://fonts.google.com/

选择的字型后 ( 范例挑选 Rubik Mono One )，点击右上方“Get font”。

点击“Download all”会把字型下载到电脑中，点击“Get embed code”则可以直接透过 API 链接的方式使用这个字型。

点击“Get embed code”之后，可以看见使用 CSS link 或 @import 加载字型的方法 ( 接下来的段落会介绍 )，通常只要将下方的程序码复制到网页中，就可以开始使用这个字型。

使用 CSS link 或 @import 加载外部字型

如果不满意系统默认的字型，而手边又刚好有适合的外部字型网址，这时就能透过 CSS link 或 @import 的方式加载并使用外部字型，前一个段落所介绍的 Google Fonts，同样也提供了这两个加载的方式。

• 使用 CSS link

  和加载外部 CSS 的作法相同，将加载的 CSS 网址换成外部字型的网址，就能够使用该字型，基本写法如下：

  <link href="外部字型的網址" rel="stylesheet">
  

  下方的范例透过 CSS link 的方式使用 Google Fonts 的 Rubik Mono One 字型。

  <!-- HTML 程式碼 -->
  <link href="https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap" rel="stylesheet">
  <div>Hello OXXO, Good morning...</div>
  
  <!-- CSS 程式碼 -->
  <style>
    div {
      font-family: "Rubik Mono One", monospace;
    }
  </style>
  

  

• 使用 @import

  运用 CSS 的 @import 方法，加载的外部字型网址，就能使用该字体。

  @import url('外部字型的網址');
  

  下方的范例透过 @import 的方式使用 Google Fonts 的 Rubik Mono One 字型。

  <!-- HTML 程式碼 --> 
  <div>Hello OXXO, Good morning...</div>
  
  <!-- CSS 程式碼 -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap');
    div {
      font-family: "Rubik Mono One", monospace;
    }
  </style>
  

  

使用 @font-face 加载外部字型

@font-face 是 CSS 定义字型的方法，可以将默认字型和外部字型 ( 自己电脑、其他字型链接等 ) 互相搭配使用，因此也可以运用 @font-face 下载外部字型。

教学参考：@font-face 定义字型

@font-face 基本上必须包含“font-family 字型名称”和“src 字型来源”两个属性，写法如下：

@font-face {
  font-family: "字型名稱";
  src: "字型來源";
}

打开刚刚 Google Fonts 的字型文件，复制字型网址后，用浏览器打开网址。

可以看见字型文件里也是有使用 @font-face 定义字型，复制“latin”里的字型网址 ( 参考链接 )。

参考下方范例，使用 @font-face 的 src 属性贴上字型网址，并将 font-family 设定为“oxxo test”，就可以使用自订的字型名称，套用对应的外部字型。

<!-- HTML 程式碼 --> 
<div>Hello OXXO, Good morning...</div>

<!-- CSS 程式碼 -->
<style>
  @font-face {
    font-family: 'oxxo test';
    src: url(https://fonts.gstatic.com/s/rubikmonoone/v18/UqyJK8kPP3hjw6ANTdfRk9YSN983TKUJcOj8.woff2);
  }

  div {
    font-family: "oxxo test", monospace;
  }
</style>

小结

使用 CSS 套用外部字型的方式，跟加载外部图片的原理大同小异，只要知道外部字型的网址，就能运用 CSS link、@import 和 @font-face 三种方法加载，相信大家应该已经磨刀霍霍，准备开始使用一些特别又漂亮的外部字型了，不过虽然外部字型很好用，但文件过大的字型 ( 例如中文字 ) 会造成网页读取速度和样式呈现顺序差异的状况，需要特别注意！

更多教学参考：@font-face 定义字型

意见反馈