月份: 2022 年 5 月

網頁字型是指網頁中使用的文字樣式。網頁字型通常會指定字體、顏色、大小和樣式（例如粗體或斜體）。這些樣式可以讓網頁內容更加清晰和美觀，並且有助於提高用戶體驗。

一般來說，使用者看的網頁中的字體，會因為作業系統預設與瀏覽器設定而不同，比如說微軟正黑體；所以當你在設計網站時，也必須將網頁字型的相關問題納入考量，即便你在網站設計稿上用到了特殊中文字型，也沒辦法讓大家瀏覽網頁的時候也看到相同效果，畢竟他們電腦不一定有這套字型。

有一種非常不建議的方法，就是請工程師直接把字體檔案上傳到網站當中，但可能會違反字型授權，更重要的是，每次使用者瀏覽網頁的時候，都得重新下載一次這套字體，以繁體中文的字數來說，中文字體檔案非常龐大，一般字體大小是網頁的三倍以上，會讓網頁載入速度變慢，影響使用者體驗，可能還沒載完網站就不耐煩地把網站關掉了。

因此我們建議，如果是少量且非常特殊的字體，可以以圖片代替。

網頁字型設計必須認識的 Webfont

Webfont 為網頁上替換字型的服務，在網頁中Webfont的使用方式，主要是由W3C協會所制定。如同W3C協會制定了在網頁上的樣式(CSS)呈現，W3C協會也制定了網頁上字體套用CSS後的呈現規範。字型需要存放於網路平台上，否則網頁僅能讀取本地端的字型檔。雖然有安裝字型檔的裝置可以看到網頁上指定的字型，但是沒有安裝該字型檔的裝置卻是無法呈現，這個網頁呈現結果則會跳回裝置上預設的系統字型。

免費和開源的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/coolfont.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中的一個屬性，它用於指定網頁元素的字體。它的規則如下：

1. 多個字體名稱可以作為一個字體系列指定給 “font-family”，瀏覽器將按照您列出的順序依次查找這些字體。
2. 如果您指定的第一個字體無法使用，瀏覽器將使用下一個字體。這樣，您可以提供多個字體作為備選，以確保網頁在大多數瀏覽器上都能以您預期的方式顯示。
3. 字體名稱必須用引號括起來，如果字體名稱包含空格，則必須使用引號。

p {
   font-family: Arial, "Helvetica Neue", sans-serif;
}

上面這段代碼將指定 “Arial” 字體作為首選字體，如果無法使用，則將使用 “Helvetica Neue”，如果再無法使用，則使用預設的 sans-serif 字體。

一般來說，字體順序的決定因網站設計者和技術平台而異，但通常情況下，系統字體（如Arial、Verdana等）會被放在前面，然後是網路字體，再是其他自訂字體。

網頁字型設計需要考慮的不只是美觀，更要考慮到對網站速度的影響喲！

延伸閱讀：

• 網頁製作4大流程大公開
• 靈感湧現！8個實用網頁設計推薦分享
• 網頁設計該知道的6件事