emfont 免費中文網頁字體服務

這是什麼能吃嗎？

一個字，不能。但很好用！

通常要在網站上使用字體有兩種方式：

線上字體服務，透過嵌入部分程式碼（script）讓網頁可以讀取第三方服務提供的字體檔案
讀取本地字體，透過 CSS 設置 @font-face 即可讀取。

像是由知名公司 Google 推出的 Google Font 即是第一種。

但是既然已經有如此強大的服務為何還要 emfont 呢？Google Fonts 雖然提供了眾多的字體可以選擇，但是中文字體卻沒有足夠的選擇，故才有此文的主角 emfont。emfont 提供了許多 不同風格 的 中、日、英、韓 文字體，彌補了 Google Fonts 的不足。

如何使用

作者提供了一個便捷的方式，使網頁開發者可以快速將此服務整合置網頁中。

選擇字體

首先先到字體選擇喜歡的字體，本筆記以「縫合像素字型 12px Mono」舉例。
選擇好後在字體頁面左邊有一個小框可以複製字體名稱，先點擊複製接下來會用到。
在網頁中要使用字體的段落，以類別（class）的方式貼上上一步得到的字體名稱。

我是縫合像素字型 12px Mono 的樣子！

<p class="emfont-FusionPixelFont12pxMono">我是縫合像素字型 12px Mono 的樣子！</p>

載入並啟動 emfont

在網頁中加入以下程式碼即可大功告成！

<script type="module">
  import "https://font.emtech.cc/emfont.js"

  emfont.init()
</script>

框架整合

作者提供了眾多框架快速整合的方式，詳細可以到框架整合頁面查看喔～

Vue.js / Nuxt

因為我的網站首頁 noefly.cc 使用 Nuxt，所以特別拉出來講。

按照作者所述，直接下面程式碼就可以快速使用：

<script setup>
import { onMounted } from "vue"

onMounted(async () => {
  const mod = await import("https://font.emtech.cc/emfont.js")
  mod.emfont.init()
})
</script>

但是，在我的網站好像會有一些問題，「mod 未定義」或是「找不到 emfont 函式」等。

一番探索後發現程式碼這樣改就可以運行了：

<script setup>
import { onMounted } from "vue"

onMounted(async () => {
  await import("https://font.emtech.cc/emfont.js")
  emfont.init()
})
</script>

如果有遇到問題的讀者，可以試試這個方法。