一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
沒有結果
檢視所有結果
一塊設計 | apo design - 設計共筆部落格
沒有結果
檢視所有結果
Home 工具分享

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

in 工具分享
by Judy Shyu
1 月 06,2021
9 min read

內容目錄

  • Google Fonts Early Access
  • 為什麼使用 Google Fonts
  • Google Fonts 使用介紹
  • 利用 API 設定加速及優化專案中的 Google Fonts 資源

前幾篇文章中有推薦大家使用 Google Fonts 來為網頁呈現字體,這篇文章就來詳細介紹 Google Fonts 到底是什麼、目前又有哪些便利的功能。 

Google Fonts Early Access

Google Fonts 以英文字體資源為大宗,近年亦逐漸增加不同語系的字體,這些字體都是經過大量測試後,才加入正式列表中的。相信早期就有在網頁中使用思源黑體的各位已經知道, Google Fonts 其實還有一個「 Early Access 」的服務,專門用來公測各種不同語系的字體。 Google 一直致力於完善多語系字體的 Noto 計畫, 2018 年思源黑體終於畢業加入正式的 Google Fonts 列表中,右邊可以看到不少已經完成測試、加入正式列表的字體清單。

Google Fonts Early Access 截圖

Early Access 原先針對繁體中文還有更多選擇,如圓體、楷體、仿宋體、明體,不過目前已經從頁面中移除,想要使用的話可以找一下網路資源,過去的連結基本上都還可以使用。不過!使用 Early Access 時應注意,由於是公測版本,仍有不少尚未優化完成的問題,例如缺漏字、部分文字顯示不佳、或是字重選擇不多等等,建議不要直接使用在正式的環境中。

為什麼使用 Google Fonts

你知道嗎?全球已經有 89% 以上的網站引用字體時使用 Google Fonts( Adobe Typekit 則是 9% )[註1]。不過,在馬上投入使用 Google Fonts 之前,可以先比較一下它究竟有哪些優點和缺點,如果手上的專案本身不能接受這些缺點,或是 Google Fonts 沒辦法達成專案所需的目標,那麼仍然應該考慮使用其他更細緻的方式來處理字體。

優點:
  1. 字體列表有強大的篩選、預覽功能,各別內頁還能選擇其他字體搭配預覽,方便設計師迅速找到理想英文字體組合
  2. 需要使用多種字體、字重時,有簡單的指標協助設計師先判斷負載是否過重
  3. 使用方式容易──選好字體後,複製貼上程式碼即可
  4. 利用字體切片( sliced font ) [註2] 的方式,加快大型字體檔案的載入速度
  5. 屬於第三方服務,不會占用自家伺服器流量
  6. 因為字體檔案有快取(cross-site caching),越多網站使用、使用者載入的速度越快
  7. 持續有團隊在維護
缺點:
  1. 繁中字體種類不多,目前只有思源黑體和仿宋體(港版目前只有思源黑體)
  2. 受網速影響,通常還是需要一些載入時間才能讓整個網站的文字呈現好
  3. 一些開源字體可能不是最新的,仍有一些 bug
  4. 在中國載入速度不快、且不算穩定,有機會被擋
  5. 使用第三方服務可能有的風險(安全性、穩定性…)

關於開源字體不是最新的這點,筆者之前在某專案使用日文字體 Sawarabi Mincho ,結果在直行呈現時部分文字會和其他字疊在一起,一查才發現這是某舊版本才有的問題,字體作者已經更新版本──而且說真的作者更新得頗勤快XD 可能因為這樣所以 Google Fonts 上的版本還沒有同步到,最後只好回頭下載最新版檔案來用。

而這又可以稍微提到,有時客戶會提出希望使用日文字體來呈現中文字。目前簡體中文、日文確實字體種類相對多一些(日文版在 GitHub 上甚至有一個精美的展示頁面),不過使用日文或簡中字體時,還是要注意因為字集不同,一些繁中的常用字也會缺漏(如哈、啦等語助詞)。

每個日文字體缺的漢字都不一樣

Google Fonts 使用介紹

經過各方評估,若你決定在專案中採用 Google Fonts ,恭喜! Google Fonts 的介面經過持續的更新,目前可說是相當成熟好用了,下面就來介紹使用流程及介面功能(以下介面截圖均截於 2020 年 11 月初,後續更新應該大同小異)。

首先來到目錄頁:

目錄頁可以很方便地搜尋、瀏覽想要的字體,介面中有:

  1. 搜尋及預覽列,可以:
    • 直接搜尋特定字體名稱
    • 預覽預設的詞組(自訂文字,或是文句、字母、段落、數字)
    • 變更預覽字體的大小
  2. 篩選功能:
    • 依據類型篩選字體(serif、sans-serif、display、handwriting、monospace)
    • 依據語系篩選字體(Arabic、Chinese(Hong Kong)、Chinese(Traditional)…)
  3. 只篩出 variable fonts [註3]
  4. 變更排序方式(按趨勢、熱門、最新、名稱排序)及列表呈現方式
  5. 字體預覽,在 1.預覽列輸入的文字會即時以不同的字體呈現在此處

點擊下方的字體後,就會來到個別字體的內頁:

  1. 點擊「 Download family 」,可以直接下載本頁整包字體
  2. 頁面主體分為五個主要的段落,分別是:
    • Select Styles :
      和目錄頁一樣,可以預覽自訂的文字內容及大小。點擊右邊的「 + Select this style 」,便可以將特定字型加入右邊的 Selected family 區塊。如果該字體為 variable font ,則下方還會有額外的 Variable axes 區塊,可以直接選擇 variable font 字型(如下圖)。



    • Glyphs:顯示字形預覽
    • About:關於本字體的介紹,包含作者及相關字體等等
    • License:本字體的授權說明
    • Pairings:好用的功能!這邊會有一些常見的、可與本頁字體搭配的字體如下:



      使用者可以很方便地:
      1. 直接點標題來到此段落
      2. 替換搭配字體的字重及順序,點+號可以將之加入 Selected family 區
      3. 預覽不同字體在標題及段落搭配的效果
  3. 右邊的 Selected family 區塊,可以看到已經被加入的字體列表
  4. 在這邊可以很方便地複製API連結,分別有<link>及@import兩種方式,擇一使用即可。其中,<link>應被貼在HTML的<head>內,而@import則應貼在css檔(或者你有使用預處理器,則放在sass檔)。
  5. 點擊「 Download all 」,則會一次下載所有選中的字體

就這樣,不論是設計師還是前端、後端工程師都能很快地上手,甚至能直接丟給客戶,讓甲方自己選字體,是否真的很簡單呢!

看完這些介紹,如果你想要關注最近 Google Fonts 新增了哪些功能、又多了什麼新字體,可以到官方推特帳號,接收即時的新訊。又如果 Google Fonts 的英文字體多到讓你不知從何下手,筆者建議可以參考 justfont 的 Google Fonts 字體推薦文章系列 [註4],除了可以學習不同類型字體的特色,還能瞭解到各個字體家族的起源和設計細節。

利用 API 設定加速及優化專案中的 Google Fonts 資源

最後,筆者想回到老本行,透過說明 Google Fonts API 裡的參數,來補充一些通常前端工程師可能比較會需要的進階小技巧:

  1. 如何避免字體載入好之前畫面一片空白?
  2. 我的頁面裡只有一句話用了特殊字體,不想載入整包字體檔可以嗎?

在Google Fonts網站中選好字體後,產生的<link>或@import內,連結大致上會長得像這樣:

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是 Chrome 49 之後推出的新 CSS 屬性 [註5],目前除 IE 以外的主流瀏覽器基本都支援。

font-display的瀏覽器支援度,截圖自caniuse.com

font-display有 5 種值,分別是:

  • auto(預設值):會採用瀏覽器的預設值,通常是block,隨著瀏覽器的更新可能有所變化。
  • block:只要字體沒有載入完成,就不會顯示文字,字體載入完成再一次把所有文字顯示出來,即標準的 FOIT
  • swap:瀏覽器會先從font-family的 fallback 設定中,選用下一個可用的替代字型來呈現文字,在載入字體的過程中逐一置換文字的字型
  • fallback:block和swap的折衷版,在一小段時間(約 100 毫秒)內不顯示文字,如果在這段時間內字體沒有載好,就會以替代字型呈現文字;但是如果字體載超過 3 秒,就不會再換字體了
  • optional:類似fallback,如果在 100 毫秒內內字體沒有載好,就會以替代字型呈現文字;但最終會根據使用者的連線速度來決定是否要加載、置換字體

因此如果專案有別的需求,要採用其他font-display值,也可以自行替換&display=後方的內容。

FOUT v.s. FOIT

FOUT( Flash of Unstyled Text )及 FOIT( Flash of Invisible Text )是兩種不同的處理字體載入時顯示字體的方式,下面直接用表格比較兩者的不同 [註6]:

FOUT(Flash of Unstyled Text)FOIT(Flash of Invisible Text)
字體載入時頁面呈現的效果字體正在載入時先套用替代字型(可能是預載好的或是系統字型),字體載好時,再把字型替換掉字體正在載入時頁面不顯示文字、字體載好才顯示文字
瀏覽器預設舊版本瀏覽器及IE、Edge採用FOUT現今瀏覽器多優先採用FOIT,但多有一個臨界值:超過至少3秒沒有載入font-face,就會自動轉為替換字型(沒有此臨界值的話,頁面會一直空白下去)
優點字體載入慢時,也能先瀏覽頁面內容如果頁面有很多emoji,直接用預設字型顯示可能會出現很多豆腐,使用FOIT可以避免此狀況
缺點字體載好時,頁面上的文字會稍微閃爍,變為新的字型字體載入慢時,頁面會有好幾秒空白
FOUT v.s. FOIT 比較表

設定text參數,只引入有用到的字元,加速載入字體檔

Google Fonts API 還有一些只寫在文件裡的參數,目前光是使用網站介面產生的程式碼是沒辦法控制這些參數的,text就是其中之一。

在比較強調視覺表現的專案,如果只有一兩行字需要使用特殊字體呈現──例如只有網頁標題要使用某個藝術字體──這時便可利用text參數,帶入頁面中有用到的字元,如此一來就只會載入這些字元所需的部分檔案,大幅減少載入的字體檔案大小。

接續前面的範例,如果網頁中只有標題「 Hello World 」要使用字重 700 的 Lato 字型,則可設定text參數如下(記得用&與其他參數接起來,且內容需要 URL-encode ):

https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap&text=Hello%20World

以上,若想深入了解 Google Fonts API ,建議閱讀官方的 API 文件。這其實是一份相當簡短的文件,可以設定的東西不多,看一下不虧!


[註1] 2020 年 11 月,來自 Datanyze 的全球統計資料。

[註2] 如系列前篇所述,中文字體動輒幾十 MB ,載入整包字體經常造成網頁載入資源過慢。 Google Fonts 團隊利用機器學習,找出中日韓文各個單字的使用頻率,並據此將龐大的字體檔案切分成眾多的小切片,藉由優先載入使用頻率高的部分文字,來加速網頁字體的呈現。詳細的說明可參考 Googleblog 發佈的文章: Google Fonts launches Japanese support ;或是這篇整理得相當清楚的中文 Web Font 文章:中文 Web Font in 2019 — 進化的 Google Fonts 和全新的 Adobe Fonts

[註3] 什麼是 variable font (可變字體)?這是近年來興起的一種字體規格,可以自由地調整文字的外觀,包含字重、字寬、襯線體 XY 軸粗度等等,可以在 Font Playground 玩玩看,感受一下他的自由度!

[註4] 延伸閱讀:  Google Fonts 字體推薦文章系列

  • Google fonts 的字體(serif 篇)
  • Google fonts 的字體(sans-serif 篇)
  • Google fonts 的字體(display 篇)

[註5] 延伸閱讀:`font-display` for the Masses

[註6] 這邊有個網站可以實際玩玩看,比較兩者的不同:FOIT vs. FOUT


系列文章目錄:
To 設計師:入門網頁字型指南 -1(網頁字體授權)
To 設計師:入門網頁字型指南 -2(網頁字體呈現基礎)
To 設計師:入門網頁字型指南 -3(網頁字體設定的複雜度光譜)
To 設計師:入門網頁字型指南 -4(實用工具:Google Fonts介紹)← 現在在這裡!
To 設計師:入門網頁字型指南 -5(設計彈性與多語系網站)

如果這篇文章對您有所幫助的話,歡迎在下面按讚表達您的支持,謝謝您!
Tags: 字體網頁設計
ShareShareShare
Judy Shyu

Judy Shyu

前端工程師,興趣廣泛,試圖為自己找到一點規律而寫作。

上一篇文章

您可能知道的 UX|基礎介紹篇

下一篇文章

Functional map 原來是這樣啊!

相關文章

【 F2E – PK 心得 】公車動態網站設計 – 訪談到 UI 設計

【 F2E – PK 心得 】公車動態網站設計 – 訪談到 UI 設計

by Debby
12 月 28,2021

這篇文章主要是分享之前公司收到六角學院的邀約,參與 F2E PK 賽 的參賽心得紀錄。PK 所製作的內容是『全台公車動態時刻查詢應用服務』活動的目標不是一個月內...

無障礙網頁設計

漫談無障礙網頁設計-3

by Judy Shyu
9 月 01,2021

上一篇講了無障礙網頁在設計上的大方向,這一篇將從各種元件的細節來討論,從尺寸、色彩、文案、影音……究竟設計上還有什麼值得注意的地方? 

歷經波折的網站改版建置分享

by Debby
7 月 28,2021

痾…不是一塊設計的網站,是筆者待的公司的網站。前陣子筆者經歷了公司的品牌更新和官網改版的兩大專案,而這兩項專案也從一團雜亂的待辦清單到現在步入軌道,進行優化的階...

Back to List

一塊特別企劃

一塊特別企劃|設計師問與答
連結至一塊設計 facebook 專頁

標籤

Adobe Xd (3) B2B (1) COVID19 (1) designer (2) design tool (3) Figma (4) functional map (1) HTML (2) illustrator (1) UI (26) UX (18) web design (1) Wordpress (2) 字體 (7) 無障礙網站 (5) 產品設計 (2) 筆記 (4) 經驗分享 (26) 網頁設計 (20) 設計師問答 (1) 設計選書 (2) 課程心得 (1) 講座 (2) 購物流程 (1) 週年企劃 (5) 遠端工作 (2) 電子報 (1) 靈感 (4)
一塊設計 a piece of design

聯絡我們

任何合作或問題請洽:
info@apodesign.tw

  • 服務條款
  • 隱私權政策

Follow us

Copyright © 2020 apodesign.tw All Rights Reserved.

沒有結果
檢視所有結果
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書