To設計師：入門網頁字型指南-4

--- title: To設計師：入門網頁字型指南-4 tags: 網頁設計, 字體 description: --- # To設計師：入門網頁字型指南-4 ![To設計師：入門網頁字型指南](https://i.imgur.com/8BIOhUJ.jpg) {%hackmd 90wqUJSZS6-SJOFf7BzsQA %} --- 前幾篇文章中，有推薦大家使用Google Fonts來為網頁呈現字體，這篇文章就來詳細介紹Google Fonts到底是什麼、目前又有哪些便利的功能。 ### Google Fonts Early Access Google Fonts以英文字體資源為大宗，近年亦逐漸增加不同語系的字體，這些字體都是經過大量測試後，才加入正式列表中的。相信早期就有在網頁中使用思源黑體的各位已經知道，Google Fonts其實還有一個「[Early Access](https://fonts.google.com/earlyaccess)」的服務，專門用來公測各種不同語系的字體。Google一直致力於完善多語系字體的Noto計畫，2018年思源黑體終於畢業加入正式的Google Fonts列表中，右邊可以看到不少已經完成測試、加入正式列表的字體清單。 ![](https://i.imgur.com/XDsZrhw.jpg) [Google Fonts Early Access](https://fonts.google.com/earlyaccess) 截圖 Early Access原先針對繁體中文還有更多選擇，如圓體、楷體、仿宋體、明體，不過目前已經從頁面中移除，想要使用的話可以找一下網路資源，過去的連結基本上都還可以使用。不過！使用Early Access時應注意，由於是公測版本，仍有不少尚未優化完成的問題，例如缺漏字、部分文字顯示不佳、或是字重選擇不多等等，建議不要直接使用在正式的環境中。 --- ### 為什麼使用Google Fonts 你知道嗎？全球已經有89%以上的網站引用字體時使用Google Fonts（Adobe Typekit則是9%）[註1]。不過，在馬上投入使用Google Fonts之前，可以先比較一下它究竟有哪些優點和缺點，如果手上的專案本身不能接受這些缺點，或是Google Fonts沒辦法達成專案所需的目標，那麼仍然應該考慮使用其他更細緻的方式來處理字體。 #### 優點： 1. 字體列表有強大的篩選、預覽功能，各別內頁還能選擇其他字體搭配預覽，方便設計師迅速找到理想英文字體組合 1. 需要使用多種字體、字重時，有簡單的指標協助設計師先判斷負載是否過重 1. 使用方式容易──選好字體後，複製貼上程式碼即可 1. 利用字體切片（sliced font）[註2]的方式，加快大型字體檔案的載入速度 1. 屬於第三方服務，不會占用自家伺服器流量 1. 因為字體檔案有快取（cross-site caching），越多網站使用、使用者載入的速度越快 1. 持續有團隊在維護 #### 缺點： 1. 繁中字體種類不多，目前只有思源黑體和仿宋體（港版目前只有思源黑體） 1. 受網速影響，通常還是需要一些載入時間才能讓整個網站的文字呈現好 1. 一些開源字體可能不是最新的，仍有一些bug 1. 在中國載入速度不快、且不算穩定，有機會被擋 1. 使用第三方服務可能有的風險（安全性、穩定性...）關於開源字體不是最新的這點，筆者之前在某專案使用日文字體Sawarabi Mincho，結果在直行呈現時部分文字會和其他字疊在一起，一查才發現這是某舊版本才有的問題，字體作者已經更新版本──而且說真的作者更新得頗勤快XD 可能因為這樣所以Google Fonts上的版本還沒有同步到，最後只好回頭下載最新版檔案來用。而這又可以稍微提到，有時客戶會提出希望使用日文字體來呈現中文字。目前簡體中文、日文確實字體種類相對多一些（日文版在github上甚至有一個精美的[展示頁面](https://googlefonts.github.io/japanese/)），不過使用日文或簡中字體時，還是要注意因為字集不同，一些繁中的常用字也會缺漏（如哈、啦等語助詞）。 ![](https://i.imgur.com/lN69Bim.png) 每個日文字體缺的漢字都不一樣 --- ### Google Fonts 使用介紹經過各方評估，若你決定在專案中採用Google Fonts，恭喜！Google Fonts的介面經過持續的更新，目前可說是相當成熟好用了，下面就來介紹使用流程及介面功能（以下介面截圖均截於2020年11月初，後續更新應該大同小異）。 #### 首先來到目錄頁： ![](https://i.imgur.com/ykkSRRr.jpg) <br/> 目錄頁可以很方便地搜尋、瀏覽想要的字體，介面中有： 1. 搜尋及預覽列，可以： 1. 直接搜尋特定字體名稱 2. 預覽預設的詞組（自訂文字，或是文句、字母、段落、數字） 3. 變更預覽字體的大小 1. 篩選功能： 1. 依據類型篩選字體（serif、sans-serif、display、handwriting、monospace） 2. 依據語系篩選字體（Arabic、Chinese(Hong Kong)、Chinese(Traditional)...） 1. 只篩出variable fonts [註3] 1. 變更排序方式（按趨勢、熱門、最新、名稱排序）及列表呈現方式 1. 字體預覽，在1.預覽列輸入的文字會即時以不同的字體呈現在此處 #### 點擊下方的字體後，就會來到個別字體的內頁： ![](https://i.imgur.com/DfLIsfk.png) 1. 點擊「Download family」，可以直接下載本頁整包字體 1. 頁面主體分為五個主要的段落，分別是： 1. Select Styles：和目錄頁一樣，可以預覽自訂的文字內容及大小。點擊右邊的「＋Select this style」，便可以將特定字型加入右邊的Selected family區塊。如果該字體為variable font，則下方還會有額外的Variable axes區塊，可以直接選擇variable font字型（如下圖）。 ![](https://i.imgur.com/UgaEd8i.jpg) 1. Glyphs：顯示字形預覽 1. About：關於本字體的介紹，包含作者及相關字體等等。 1. License：本字體的授權說明 1. Pairings：好用的功能！這邊會有一些常見的、可與本頁字體搭配的字體如下： ![](https://i.imgur.com/Cn6QC0G.jpg) 使用者可以很方便地： 1. 直接點標題來到此段落 2. 替換搭配字體的字重及順序，點＋號可以將之加入Selected family區 3. 預覽不同字體在標題及段落搭配的效果 1. 右邊的selected family區塊，可以看到已經被加入的字體列表 1. 在這邊可以很方便地複製API連結，分別有`<link>`及`@import`兩種方式，擇一使用即可。其中，`<link>`應被貼在HTML的`<head>`內，而`@import`則應貼在css檔（或者你有使用預處理器，則放在sass檔）。 1. 點擊「Download all」，則會一次下載所有選中的字體就這樣，不論是設計師還是前端、後端工程師都能很快地上手，甚至能直接丟給客戶，讓甲方自己選字體，是否真的很簡單呢！看完這些介紹，如果你想要關注最近Google Fonts新增了哪些功能、又多了什麼新字體，可以到[官方推特帳號](https://twitter.com/googlefonts)，接收即時的新訊。又如果Google Fonts的英文字體多到讓你不知從何下手，筆者建議可以參考justfont的Google Fonts字體推薦文章系列 [註4]，除了可以學習不同類型字體的特色，還能瞭解到各個字體家族的起源和設計細節！ --- ### 利用 API 設定加速及優化專案中的 Google Fonts 資源最後，筆者想回到老本行，透過說明Google Fonts API裡的參數，來補充一些通常前端工程師可能比較會需要的進階小技巧： 1. 如何避免字體載入好之前畫面一片空白？ 1. 我的頁面裡只有一句話用這個字體，不想載入整包字體檔可以嗎？ <br> 在Google Fonts網站中選好字體後，產生的`<link>`或`@import`內，連結大致上會長得像這樣： ```htmlmixed= https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Roboto:ital,wght@0,300;1,300&display=swap ``` 上面這個網址會載入Lato的字重700字型，以及Roboto的字重300一般字型、字重300斜體字型，並將`font-display`設置為`swap`。這段網址便是存取Google Fonts API的方式，這段網址的組成如下： 1. `https://fonts.googleapis.com/css2`：base URL 2. `?`：帶入後面的參數，接在baseURL後，只須寫一次 3. `family=Lato`：載入的字體名稱，可以用`&`串接使用多個不同字體 4. `:wght@700`：接續在字體名稱後，設定該字體要載入的具體字型（字重、斜體...）；如果沒有設定，則會載入預設值，0（normal）、400（regular）；如果選用的字體是variable font，則可以指定一個範圍如`:wght@200..900` 5. `&display=swap`：設定`font-display`的值為`swap`，注意這邊已經是下一個參數，所以要用`&`隔開。瞭解這幾個參數後，基本上就能自己撰寫、修改這段網址，不需要每次都回到Google Fonts官網去選字體、產生程式碼了。不過，最後這個`font-display`是做什麼的呢？又，是否還有其他更多參數可以使用？ #### 設定`font-display`為`swap`，讓字體檔案尚未載好前，網頁不會一片空白各位打開網頁時，是否有時會先看到一片空白、過一陣子後文字才啪！地一下全部跑出來？這是因為多數瀏覽器預設的字體載入方式屬於FOIT（詳後述），網速慢時尤其容易遇到這個情形。現在使用Google Fonts直接複製`<link>`或`@import`，連結預設就會帶好`&display=swap`這個參數。這個參數會讓Google載入字體時的`@font-face`設定包含`font-display:swap`，它有什麼功用呢？ `font-display`是Chrome49之後推出的新CSS屬性 [註5]，目前除IE以外的主流瀏覽器基本都支援。 ![](https://i.imgur.com/etNeucz.jpg) font-display的瀏覽器支援度，截圖自[caniuse.com](https://caniuse.com/?search=font-display) `font-display`有5種值，分別是： - `auto`（預設值）：會採用瀏覽器的預設值，通常是block，隨著瀏覽器的更新可能有所變化。 - `block`：只要字體沒有載入完成，就不會顯示文字，字體載入完成再一次把所有文字顯示出來，即標準的FOIT - `swap`：瀏覽器會先從`font-family`的fallback設定中，選用下一個可用的替代字型來呈現文字，在載入字體的過程中逐一置換文字的字型 - `fallback`：`block`和`swap`的折衷版，在一小段時間（約100毫秒）內不顯示文字，如果在這段時間內字體沒有載好，就會以替代字型呈現文字；但是如果字體載超過3秒，就不會再換字體了 - `optional`：類似`fallback`，如果在100毫秒內內字體沒有載好，就會以替代字型呈現文字；但最終會根據使用者的連線速度來決定是否要加載、置換字體因此如果專案有別的需求，要採用其他`font-display`值，也可以自行替換`&display=`後方的內容。 :::info #### FOUT v.s. FOIT FOUT（Flash of Unstyled Text）及FOIT（Flash of Invisible Text）是兩種不同的處理字體載入時顯示字體的方式，下面直接用表格比較兩者的不同 [註6]： <br> | 　　　　　 | FOUT（Flash of Unstyled Text） | FOIT（Flash of Invisible Text） | | -------- | ---------------------------- | ----------------------------- | | 字體載入時頁面呈現的效果 | 字體正在載入時先套用替代字型（可能是預載好的或是系統字型），字體載好時，再把字型替換掉 | 字體正在載入時頁面不顯示文字、字體載好才顯示文字 | | 瀏覽器預設 | 舊版本瀏覽器及IE、Edge採用FOUT | 現今瀏覽器多優先採用FOIT，但多有一個臨界值：超過至少3秒沒有載入font-face，就會自動轉為替換字型（沒有此臨界值的話，頁面會一直空白下去） | | 優點 | 字體載入慢時，也能先瀏覽頁面內容 | 如果頁面有很多emoji，直接用預設字型顯示可能會出現很多豆腐，使用FOIT可以避免此狀況 | | 缺點 | 字體載好時，頁面上的文字會稍微閃爍，變為新的字型 | 字體載入慢時，頁面會有好幾秒空白 | ::: #### 設定`text`參數，只引入有用到的字元，加速載入字體檔 Google Fonts API 還有一些只寫在文件裡的參數，目前光是使用網站介面產生的程式碼是沒辦法控制這些參數的，`text`就是其中之一。在比較強調視覺表現的專案，如果只有一兩行字需要使用特殊字體呈現──例如只有網頁標題要使用某個藝術字體──這時便可利用`text`參數，帶入頁面中有用到的字元，如此一來就只會載入這些字元所需的部分檔案，大幅減少載入的字體檔案大小。接續前面的範例，如果網頁中只有標題「Hello World」要使用字重700的Lato字型，則可設定`text`參數如下（記得用`&`與其他參數接起來，且內容需要URL-encode）： ```htmlmixed= https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap&text=Hello%20World ``` 以上，若想深入了解Google Fonts API，建議閱讀[官方的API文件](https://developers.google.com/fonts/docs/css2)。這其實是一份相當簡短的文件，可以設定的東西不多，看一下不虧！ --- [註1]　2020年11月，來自[Datanyze](https://www.datanyze.com/market-share/web-fonts--16/google-font-api-market-share)的全球統計資料。 [註2]　如系列前篇所述，中文字體動輒幾十MB，載入整包字體經常造成網頁載入資源過慢。Google Fonts團隊利用機器學習，找出中日韓文各個單字的使用頻率，並據此將龐大的字體檔案切分成眾多的小切片，藉由優先載入使用頻率高的部分文字，來加速網頁字體的呈現。詳細的說明可參考Googleblog發佈的文章：[Google Fonts launches Japanese support](https://developers.googleblog.com/search/label/Fonts) ；或是這篇整理得相當清楚的中文Web Font文章：[中文 Web Font in 2019 — 進化的 Google Fonts 和全新的 Adobe Fonts](https://dorawei.xyz/chinese-webfont-2019/) [註3] 什麼是variable font（可變字體）？這是近年來興起的一種字體規格，可以自由地調整文字的外觀，包含自重、字寬、襯線體XY軸粗度等等，可以在[Font Playground](https://play.typedetail.com/)玩玩看，感受一下他的自由度！ [註4] **延伸閱讀：** Google Fonts字體推薦文章系列 - [Google fonts 的字體（serif 篇）](https://blog.justfont.com/2014/06/google-fonts-1/) - [Google fonts 的字體（sans-serif 篇）](https://blog.justfont.com/2014/06/google-fonts-2/) - [Google fonts 的字體（display 篇）](https://blog.justfont.com/2014/06/google-fonts-3/) [註5] **延伸閱讀：** https://css-tricks.com/font-display-masses/ [註6] 這邊還有個網站可以讓大家實際玩玩看，比較兩者的不同：[FOIT vs. FOUT](https://www.zachleat.com/foitfout/)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.