網頁字型是指網頁中使用的文字樣式。網頁字型通常會指定字體、顏色、大小和樣式（例如粗體或斜體），這些樣式可以讓網頁內容更加清晰和美觀，並且有助於提高用戶體驗。
一般來說，使用者看的網頁中的字體，會因為作業系統預設與瀏覽器設定而不同，比如說微軟正黑體；所以當你在設計網站時，也必須將網頁字型的相關問題納入考量，即便你在網站設計稿上用到了特殊中文字型，也沒辦法讓大家瀏覽網頁的時候也看到相同效果，畢竟他們電腦不一定有這套字型。
有一種非常不建議的方法，就是請工程師直接把字體檔案上傳到網站當中，但可能會違反字型授權；更重要的是，每次使用者瀏覽網頁的時候，都得重新下載一次這套字體，以繁體中文的字數來說，中文字體檔案非常龐大，一般字體大小是網頁的三倍以上，會讓網頁載入速度變慢，影響使用者體驗，可能還沒載完網站就不耐煩地把網站關掉了。
因此我們建議，如果是少量且非常特殊的字體，可以以圖片代替。
網頁字型設計必須認識的 Webfont
Webfont是一種用於網頁設計的字型檔案格式，可以讓網頁設計者在其網站上使用非標準的字型。在網頁中 Webfont 的使用方式，主要是由 W3C 協會所制定。如同 W3C 協會制定了在網頁上的樣式(CSS)呈現，W3C 協會也制定了網頁上字體套用 CSS 後的呈現規範。
一般來說，網頁瀏覽器只能顯示使用者電腦上已安裝的字型，這就限制了設計者的選擇。但是，透過使用Webfont，字型存放於網路平台上，設計者可以將自定義的字型嵌入到網頁中，使得在使用者電腦上沒有安裝這些字型的情況下，網頁仍能正常顯示。
Webfont的常見格式包括TrueType（.ttf）、OpenType（.otf）、WOFF（Web Open Font Format）、WOFF2（Web Open Font Format 2）等。這些格式經過優化，能夠在網頁上快速載入，並且通常具有良好的跨瀏覽器和跨裝置的相容性。
使用Webfont可以增加網頁設計的彈性和創意，讓設計者更能夠實現他們的設計理念，同時提供更豐富的使用者體驗。
免費和開源的Webfont：Google Fonts
Google Fonts（以前稱為 Google Web Fonts）是 Google 擁有的電腦字體和網站字體服務。這包括免費和開源字體系列，用於瀏覽器、網站中，以及透過 CSS 和 Android 使用字體的API。Google Fonts 存放在 Google 主機中，下載字體不需吃自己主機流量，Google 主機速度快。Google 字體庫中的流行字體包括Roboto、Open Sans、Lato、Oswald、Montserrat、Source Sans Pro和Raleway，近年也新增了一些中文、日文字體，提供中文網站使用者更多選擇。
而我們使用的網頁設計架站外掛 Elementor，在核心中就是使用 Google 字體，多達800多種的字體，可以任意使用，但當然大多數為英文字體。
網頁設計常用的字型：思源黑體、思源宋體
思源黑體與思源宋體是由 Adobe 與 Google 聯手開發的開源字型，中文命名取自飲水思源之意，支援字符數量極多，爾後 Google 以不同字重的方式將思源黑體以 Noto Sans CJK 名稱釋出。一般在缺字的時候會出現方框，因此缺字被戲稱為「豆腐」，而思源體的字型家族英文名稱為 Noto，即無豆腐之意，指創作者希望該字型不缺字，是最完善的字型。
由於 Google 和 Adobe 在創作思源體時是涵蓋了幾乎全世界地區的文字，TC 指的是 Traditional Chinese，因此你也可以找到對應的日文思源體、英文思源體、簡體中文思源體等等，非常全面。
中文網頁設計通常會使用Google 的開源字體：思源黑體Noto Sans TC、思源宋體Noto Serif TC。這些字體是根據 Open Font License 獲得許可的，可以在您的產品和項目中使用它們——印刷或數字、商業或其他方式。
Noto Sans Traditional Chinese 思源黑體繁體中文
Sans是無襯線的意思，指的是黑體。一般網頁都可以使用黑體，帶有輕鬆大方的感覺，也易於閱讀。
Noto Serif Traditional Chinese 思源宋體繁體中文
Serif指的是襯線體，在字型筆畫的始末有一些裝飾細節。宋體相較於黑體來說，有嚴肅、認真的氛圍，可以依據您的網站性質、品牌形象選擇使用的字體。
特殊網路字型 Webfont
justfont 為目前最大的中文 webfont 服務商， 2012年，他們推出了 justfont 中文雲端字型服務，達成了中文字型也能應用於網頁的重要里程碑！justfont 是華文第一個推出「中文網路字型(web font)服務」的網站，專注於中文字型的服務，並在功能完整度、顯示速度以及字型品質上都非常要求。期許能讓網路設計師們，都能夠隨時瀏覽到高品質的字型。
justfont 對於網路字型的說明
網路字型(Web Font)主要用途在使用於網頁上的字型顯示，擺脫以往字型需安裝方能顯示的限制，使得於網頁設計上能夠不用轉圖檔，使用者一樣能夠看到特殊的字型效果。目前在英文語系國家，網路字型的使用甚為方便，但在亞洲語系國家則限制頗多，主要的困難點在於亞洲語系國家的字數太多，導致單一字型檔的大小，動輒5~6M，甚至有達到10M以上的字型檔案，要在瀏覽時下載整個字型檔是不現實的。網路字型機制，是依據您網頁上使用的文字，動態的產生並下載您需要的字型，所需下載的檔案大小等同於圖檔，且使用方便無須額外設定。
網路字型的好處就是，可以不需要下載全部的中文檔案，透過「網路字型」的機制，只下載網頁上所使用到的字即可，大幅的降低了所需下載檔案的大小。
有興趣的使用者可以參考 justfont 的 Webfont方案，主要採訂閱制，有免費試用，若確定訂閱則以年計費，僅能用於網頁中，webfont 僅能以 javascript 套用，無法下載字型安裝至電腦上使用。並以PVs（Page View） 計算網頁瀏覽次數，代表這個方案可以使用多少個網頁瀏覽次數，每頁不論使用多少字體數量，都以 1PV 計算，例如：假如你的網站平均一個訪客會瀏覽 2 個頁面的話，那 100,000 PVs 就可以提供給⋯⋯100,000/2 = 50,000 個訪客使用。
怎麼嵌入特殊字型？
若您還是想在網站中嵌入特殊字型可以參考以下教學：
要在網頁中嵌入特殊字體，您需要使用 CSS 的 @font-face 規則。首先，您需要下載您想要使用的字體文件，並將其上傳到您的網站伺服器。然後，在您的 CSS 文件中，您可以使用 @font-face 規則定義字體的名稱、來源和其他樣式選項。例如，假設您下載了一個名為 “MyFont” 的字體文件，並且將其上傳到了您的網站的 “fonts” 目錄中，您可以使用以下 CSS 來定義字體：
@font-face {
font-family: "MyFont";
src: url("/fonts/MyFont.ttf") format("truetype");
}或是在網頁的 HTML 源代碼中引用該字體文件，並在 CSS 樣式表中使用 font-family 屬性指定字體的名稱。
例如，假設你想在網頁中使用名為 “MyFont” 的字體，你可以在 HTML 源代碼中添加以下代碼來引用字體文件：
<link href="https://example.com/fonts/MyFont.ttf" rel="stylesheet">然後，您就可以在其他 CSS 規則中使用這個字體了。例如，您可以使用以下 CSS 來指定所有標題元素（例如 <h1>，<h2> 等）使用這個字體：
h1, h2, h3, h4, h5, h6 {
font-family: "MyFont", sans-serif;
}請注意，上述示例只是示例代碼，實際情況可能會有所不同。此外，請確保在使用特殊字體時持有相應的授權。
網站字體也有順位？font-family 排序及示例
CSS 中的 font-family 的排序指的是網頁設計者指定的字體列表，按照順序列出了瀏覽器在查找字體時應該使用的字體。這些字體會被優先使用，直到瀏覽器找到一個可用的字體。如果網頁設計者列出的所有字體都不可用，瀏覽器將使用預設 Font Stack 中的第一個字體。因此，“font-family” 的排序是決定網頁顯示的字體的重要因素。
Font Stack 是什麼？
Font Stack 是 CSS font-family的一個字體清單，以使用者滿意度來排序。Font Stack 支援網頁字體設定，因此無需透過電腦安裝。
font-family的規則
font-family 是 CSS 中的一個屬性，它用於指定網頁元素的字體。它的規則如下：
- 多個字體名稱可以作為一個字體系列指定給 “font-family”，瀏覽器將按照您列出的順序依次查找這些字體。
- 如果您指定的第一個字體無法使用，瀏覽器將使用下一個字體。這樣，您可以提供多個字體作為備選，以確保網頁在大多數瀏覽器上都能以您預期的方式顯示。
- 字體名稱必須用引號括起來，如果字體名稱包含空格，則必須使用引號。
p {
font-family: Arial, "Helvetica Neue", sans-serif;
}上面這段代碼將指定 “Arial” 字體作為首選字體，如果無法使用，則將使用 “Helvetica Neue”，如果再無法使用，則使用預設的 sans-serif 字體。
一般來說，字體順序的決定因網站設計者和技術平台而異，但通常情況下，系統字體（如Arial、Verdana等）會被放在前面，然後是網路字體，再是其他自訂字體。
網頁字型的常見問題
- 為什麼網頁字型會影響網站載入速度？
自訂字型（尤其是中文字型）文件較大，需要額外下載，可能導致頁面加載變慢，影響使用者體驗。 - 如何選擇適合的網頁字型來優化速度？
選擇 Google Fonts 或其他經過優化的 Webfont，並使用適當的格式（如 WOFF2）來減少載入時間。 - 內嵌字型和遠端載入字型哪種較好？
遠端字型可節省主機流量，但內嵌字型能減少額外的請求，建議根據需求平衡兩者。 - 是否應該直接上傳字型檔案到網站？
不建議，這可能違反授權規範，且字型檔案通常較大，會拖慢網站載入速度。 - 如何測試網站字型對速度的影響？
可使用 Google PageSpeed Insights、Lighthouse 或 WebPageTest 來分析字型對載入時間的影響。
在設計網站時，選擇適合的網頁字型確實會影響網站的載入速度，需要考慮的不只是美觀。使用Webfont可以讓設計者在網站中運用更多非標準字型，增加設計的彈性和創意，但同時也可能增加網站的載入時間。因此，在選擇網頁字型時，設計者需要在美觀和性能之間找到平衡點
如果您希望網站能夠快速載入並提供良好的用戶體驗，我們提供專業的網站速度優化服務。透過優化網站的代碼、圖像和其他資源，我們可以幫助您提高網站的載入速度，同時保持精美的設計和優質的內容。立即聯繫我們，讓我們一起打造更快速、更優秀的網站體驗吧！
資料來源：開源字型 vs. 免費字型：開源一定免費可商用，但免費卻不一定開源？、justfont服務支援
延伸閱讀：
