avatar
發佈

談談網頁中的字體 — 設計、檔案格式與前端載入

目錄

前陣子 設事未深 的字型大補帖引起了一波領取字體的熱潮,除了在簡報、海報、社群貼文之外,你有想過在網頁上是如何使用字體的嗎?

typewritter

photo by David Klein on Unsplash

之前 設事未深 的字型大補帖引起了一波字體的熱潮,那除了在簡報、海報、社群貼文之外,你有想過在網頁上是如何使用字體的嗎?

於是今天就來先分享一些關於在網頁上使用字體的知識和技術細節,前半算是科普,後半關於網頁如何使用字體的部分談比較多技術,不是前端工程師的就斟酌觀看囉!

藉由這篇文章,我將會告訴你 👇

  1. 一個字體的誕生(不專業版)
  2. 字體的檔案有哪些
  3. 網頁如何使用字體

字體設計流程

在開始介紹之前,因為實在太好奇字體如何被設計出來的,於是就問了一下身為設計師的朋友一些關於字體設計的問題,在這邊簡短介紹一下流程開個頭。

以繁體中文來說,會先做幾個固定的字 ,這些字做完就能大概涵蓋到中文字的筆畫規律,像是「永」就包括了所有不同筆劃,「鷹」則是可以測試有很多橫筆的情況等等。

https://www.easyatm.com.tw/wiki/%E6%B0%B8%E5%AD%97%E5%85%AB%E6%B3%95

接著可能會使用 GlyphsFontForge 等軟體來調整各項細節,把大部分中文字做出來後,擺在一起確認一致性,最後就是一股作把剩下的中文字都做完。

網頁中的繁體中文有多少字要設計?

關於中文字的總量,在教育部的異體字字典收錄了十萬多字,而根據 Google Font 有提供的思源黑體檔案來看,網頁上會需要載入的字數大概是一萬五千字左右。

不專業地介紹完大致上的流程後,設計的細節就不再這邊誤人子弟了,有興趣的可以去看 justfont blog 會有更多關於字體的好文可以看。

字體一般來說都以怎樣的檔案格式儲存呢?

起初電腦的文字都是以點陣圖的方式呈現,這階段與印刷文字還是有很大的落差,因而字體就算設計出來了,也很難在電腦上完整呈現其美感。

但在 1984 年 Adobe 推出了 PostScript 後,電腦開始能夠顯示向量版的文字,效果甚至能跟印刷文字差不多,因而開啟了在電腦上應用各種字體的可能性。

點陣圖與向量圖的差異 👇

https://digitalmediaandvisualarts.blogspot.com/2016/10/raster-vs-vector.html

接著就是各大軟體龍頭競相開發字體的格式,對歷史有興趣的可以去看 格式大戰:你用的字型檔,是巨頭們大戰後的產物,在這邊先逐一介紹大戰過後的這七種字體的檔案格式,其中除了 ttc 之外,都是可供網頁載入的字體。

1. .ttf (TrueType Font)

  • 1989 年,由於 Adobe 不願公佈 PostScript 的商業機密,因此 Apple 和 MicroSoft 合作開發了新的字型格式 TrueType (.ttf)
  • 最早也是最廣泛使用的格式,在網路上下載的字體大多都是 ttf 格式

2. .otf (OpenType Font)

  • 1997 年,MicroSoft 又和 Adobe 開發了 OpenType (.otf) ,是對 TrueType 的擴充,同時也支援 Unicode 萬國碼。
  • 2005 年時被 ISO 納入標準,稱為 Open Font Format (off)

3. .ttc (TrueType Collection)

  • 1989 年釋出,是 TTF 或  .OTF 的集合體,主要是來整合同一種字型的文件,像是思源系列就可以包成一個 ttc 檔來減少檔案大小。
  • 網頁不能直接載入它,你只能個別載入裡面的某個 ttf 或 otf 檔。

4. .eot

  • 跟字體打交道很久的人可能會看過這格式,是 IE 主要使用的格式,但也因此要隨著 IE 走入歷史了。

5. .woff (Web Open Font Format)

  • 2010 年 由 Mozilla、Type Supply、LettError 和其它組織協力開發的「網路開放字型格式」
  • woff 格式的字體檔案經過壓縮,相較於 ttf 和 otf 能大幅減輕瀏覽器載入字體的負擔,也加快了載入速度。
  • 目前 web 字體的主流之一

6. .woff2

  • woff 的 2.0,主要是壓縮得更徹底,相同的字體大約可以比 woff 再壓縮 20% 到 30% 左右的大小。
  • 現在開發時其實可以優先考慮使用 woff2 的格式,並根據支援度處理

7. .svg (Scalable Vector Graphics)

  • 電腦最初在字體上的一大演進就是從點陣圖進化到向量圖,因此也一定可以在純向量圖格式來表現字體。
  • svg 的主要應用是在 icon font ,用來減少圖片的使用率,也能讓 icon 像文字一樣調整大小、粗細和顏色。

在網頁上如何載入字體?

在網頁上載入字體時,主要是作為 CSS 的資源載入,並使用 font-face 屬性來載入。

font-face

引入外部字體檔案,客製化相關的 CSS  屬性。

這裏先直接使用 MDN 的範例來跟大家說明基本語法 👇

實際用起來大概是這樣 👇

MDN Demo

對使用 font-face 有一些感覺後,接著來詳細說明我們可以怎麼使用它 👇

font-family

定義 font-face 的名稱,可以不用跟字體原本的檔案一樣,之後在 font-family 就只需要使用這名稱就可以使用整組 font-face 的屬性。

而非 font-face 裡的 font-family 可以透過逗點來連接備用字體,即會依照順序取用字體。

src

用 url 指定要載入的外部字體檔案路徑、 local 來使用本地的字體。

下面的範例就會先用使用者電腦裡的 Helvetica Neue Bold 字體,當兩個 Local 字體都沒有時,才會額外去下載 MgOpenModernaBold.ttf 的字體

@font-face {
  font-family: MyHelvetica;
  src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

而不只是能載入多種字體,也可以用 format 來載入多種字型的格式來處理瀏覽器的支援度問題。

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
}

unicode-range

可以讓瀏覽器依據給定的萬國碼範圍來下載字體

unicode 有在上面提到是「萬國碼」的意思,而萬國碼的出現顧名思義就是要解決各國的文字資料格式不統一,而無法正常顯示的問題,主要是為所有文字定義了一個代碼,讓不同語言和平台都能透過 unicode 正常顯示文字。

而使用時主要會想達成以下兩種效果 👇

  1. 只下載當前頁面上需要用到的部分,來減少載入大小跟加快載入速度
  2. 建立複合式的字體,一個單字、一段話裏可能含有多種字體

以下借用 GTW 寫的範例來說明:

/* 備用字型 - 大小:4.5MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansFallback.woff); /* 沒有指定萬國碼區間,預設涵蓋所有的範圍 */
}

/* 日文 - 大小: 1.2MB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSansJapanese.woff);
  unicode-range: U+3000-9FFF, U+ff??;
}

/* 英文字型與一些符號等 - 大小: 190KB */
@font-face {
  font-family: DroidSans;
  src: url(DroidSans.woff);
  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
}

font-display

主要是在指定字體載入的期間,網頁因此被阻塞時,該如何顯示跟替換字體的策略,通常是希望能減少網頁被阻塞的時間以優化效能。

有以下策略可選 👇

auto

順從瀏覽器的預設值,通常是 block。

block

字體載完之前,會暫時隱藏文字,直到載完後會馬上替換。

但其實這段時間瀏覽器會載入一個看不見的 placholder 在那邊佔位(以畫面來講會是一面空白),等到字體載完再馬上替換掉 placeholder ,這個效果也有專有名詞 FOIT (flash of Invisible Text) ,指稱看不見的文字一閃而過。

https://www.w3cplus.com/css/font-display-masses.html

swap

字體載完之前,瀏覽器會使用備用字體顯示文字(備用字體在 font-family 定義) ,當字體載完後一樣會馬上替換。

這效果的專有名詞是 FOIT (flash of Unstyle Text) ,相較於 FOIT ,是指沒有客製化樣式的文字一閃而過,基本上能確保正常顯示的 swap 在大多數情況下都很好用。

https://www.w3cplus.com/css/font-display-masses.html

fallback

介於 auto 和 swap 之間,會很短暫地隱藏文字(約 100 毫秒 ),若字體還沒載好,就會先顯示備用的字體。而字體載好後,一樣會替換。

optional

載入時的處理跟 fallback 一樣,但是瀏覽器會自己判斷是否要使用自定義的字體,如果瀏覽器判斷載入速度太慢,就會直接捨棄自定義的字體。


那其他比較常見也淺白的字體屬性就不再這邊一一贅述了,可再參考 MDN — font 就有很完整的範例!

其實原本還想繼續介紹 Google Font 開源字體,與繁體字體目前在網頁使用上遇到的一些困難,但覺得今天的篇幅已經夠多了,就留待下篇再介紹囉!

如果今天的內容有哪裡有問題、建議或想討論的都歡迎留言告訴我!


最後,喜歡的話歡迎幫我拍手,拍手最多可以拍 50 下,依據你覺得有幫助的程度幫我拍手就好,這也可以成為讓我調整的依據 🙌

References