Emfont 免費中文網頁字型:超過 90 款開源字型,一行程式碼輕鬆嵌入網站

Emfont

說到網頁字型(Webfont)大部分開發者一定都會先想到 Google Fonts速度快、收錄字型數量豐富,而且是 Google 本家的服務基本上沒太大問題,但如果考量到隱私問題則可使用 Bunny Fonts 替代,這是一項和 Google 字體幾乎相同的服務,不過採用零追蹤和無日誌政策,因此能完全符合一般資料保護規則,若著重於自行託管字型的話也可參考之前我介紹過的 Fontsource

Emfont:免費中文網頁字型服務

本文要推薦Emfont」是近期發現的免費中文網頁字型服務,由於中文字體檔案容量較大、需要耗費大量流量,因此很少有免費的中文網頁字型服務,Emfont 為了解決這個問題收錄超過 90 款開源中文字型,提供給有需要的開發者非常完整、全面的中文字型解決方案。

Emfont 字型特色與授權

在 Emfont 網站收錄完整的免費字型,當然這些字型都是開放原始碼、可自由下載使用,無需付費,但如果要使用於商業產品、印刷品、應用程式等用途,記得從字型頁面找到授權條款,確認是否符合授權要求(大多數都是採用 SIL 開源字型授權)。

靈活的字型嵌入方式

如果想在網頁直接嵌入字型,Emfont 也提供一些方式,包含使用 JavaScript 或是純 CSS 載入字體,也能整合到常用框架,例如 React、Next.js、Vue 3、Angular 和 WordPress 等。

這項專案使用 Zeabur國雲網路提供的台灣高速穩定運算資源,載入和瀏覽速度很快。

網站名稱:Emfont
網站鏈結:https://font.emtech.cc/

Emfont 使用教學

操作步驟
瀏覽字型列表

開啟 Emfont 網站後點選「字型」就會看到收錄的中文字體列表,網站以免費且開源的中文字型為主,目前一共有超過 90 款字型,每個字型會有名稱、字重、作者和字型預覽。

Emfont

篩選與搜尋字型

從左側選項可輸入關鍵字進行字型搜尋,或是以字體分類(Serif、Sans-serif、Cursive、Monospace 和 Fantasy)、字型家族、標籤等方式縮小瀏覽範圍。

Emfont

即時測試字型效果

從「即時測試」編輯預設的預覽文字來查看在不同字型下的顯示效果。

Emfont

點選進入字型頁面後也可以點選預覽文字、將它修改成任何文字來即時顯示呈現效果

在字型頁面會有詳細介紹、字型家族、作者、版本、授權方式和不同的字重,點選下載就能單獨取得特定的字型檔案,Emfont 也有標示每個字型的開發者鏈結,可以連結到 GitHub 取得最新版本的字型檔案。

Emfont

嵌入字型至網頁

從字型頁面下方「第一次使用 emfont?」說明就能找到使用教學,也就是 Emfont 官方文件,從快速入門提供的 JavaScript 程式碼進行載入、啟動後就能在網頁中套用相關字型。

優點是只需要一行 JavaScript 就能運作,而且字體檔預設壓縮為 .woff2 格式,加速載入速度、節省在載入中文字型時會用到的時間,不過在設定時可能需要一些基礎,例如要修改一些參數等,相對來說其實不像是一般網頁字型那麼簡單(如果在每個字型頁面都提供嵌入代碼或許會更為簡單易用)。

有需要和其他開發框架整合的話也可以參考「框架整合」說明。

Emfont

值得一試的三個理由:

  • 收錄超過 90 款免費開源中文字型,解決中文字體檔案過大、難以免費取得的問題
  • 支援 JavaScript 和 CSS 字型載入,壓縮為 .woff2 格式加速網頁效能
  • 採用 Zeabur 與國雲網路的穩定運算資源,台灣載入速度快