設計系統: 字體 (Design System: Typography) #2

這篇寫給前端工程師的字體指南，從最基本的字體種類、CJK 差異、授權地雷，到可閱讀性與缺字陷阱，帶你一次搞懂網頁字體的眉角，避免讓你的 UI 看起來像缺字的抖音字幕那樣亂七八糟。

emfont 是一款免費、簡單易用的 CJK webfont（網頁中文字體）服務， 讓你只需在網站內加上兩行 JavaScript，並在元素上套用 class，就能立即套用豐富的字型。 不論是形象網站、作品集，還是部落格，都能大幅提升視覺質感。 目前 emfont 提供超過 90 款開源中文字型。 輕巧，穩定，不必處理繁瑣的設定，也不需擔心版權問題，讓設計和開發專注於創意本身。 本專案特別感謝 Zeabur 及 國雲網路 提供台灣高速穩定的運算資源。 讓 emfont 能持續為大家提供優質服務。 而最重要

網路字型 (Web Font)主要用途在使用於網頁上的字型顯示，擺脫以往字型需安裝方能顯示的限制，使得於網頁設計上能夠不用轉圖檔，使用者一樣能夠看到特殊的字型效果。

要在網頁上使用特定的中文字體，你可能需要使用Web字體服務（如Google Fonts）或將字體文件托管在自己的服務器上，并通过CSS正確聲明。

這次要跟大家分享一個寶藏網站—Emfont。 這是一個主打「免費中文網頁字型」的平台，收錄了超過 90 款開源中文字型，不僅能直接下載，還能用一行 JavaScript 程式碼快速嵌入網站，對於需要大量中文內容的網頁來說，根本是救星等級的存在！

HTML font face 網頁文字的字型設定是傳統的字型設計方式，這裡所謂的字型設計並非指設計出一套字型，而是套用現成的字型至指定的文字上，嚴格來說 face 是 的一個屬性，網頁設計師可以利用 font face 屬性讓文字呈現出 serif 字型、sans-serif 字型、新細明體、標 ...