由5W3H帶你近一步洞悉WEBFONT的好

2021-11-23 09:50:11.0

分類: Font Technology

什麼是WebFont?!

從字面上解釋,WebFont中文意思是網頁字型,即以網頁為載體,讓各種風格的字型透過排印呈現出來。在網頁上一般的閱讀文字多使用系統預設字體,標題、圖形上若需要使用的文字,大多讓文字以圖形的方式呈現,而WebFont網頁字型它是一種以真實文字方式呈現在各種平台瀏覽器上的技術。您可以為網站的內容或圖形上的文字選擇適合風格的字型,讓瀏覽網頁的使用者看見不一樣的效果,可以讓字型即時套用您的網頁上,讓網頁不在只有單調古板的預設字體。

 

為什麼要裝WebFont

早期網頁技術如果要用電腦預設字以外的字型做網頁,必須要將其轉換成圖檔,區塊性的丟在頁面上顯示,但如果文案需一改再改就必須對圖檔做修改,所耗費的時間成本相對的多,而這樣的網頁勢必要對圖片解析度有著相對高的要求,當然,一個網站如果高解析度的圖檔過多,可想而知,如果網站運行不想成為慢郎中,運作所需要的效能相對的要求更高,所付出的成本相對的也會跟著提高。

 

WebFont的是一種能夠在網頁上即時套用字型的技術,能夠解決網頁設計師對於內容修改上耗費多工的情況,也不用擔心效能上的需求問題,操作方式簡單易懂,只需幾個步驟,即可為您的網頁換上新的風貌。文鼎iFontCloud提供網頁字型技術的服務,讓網頁設計師能夠以合法、正確的方式,將iFontCloud網站上眾多風格眾多的字型放在網頁上。

 

以下以文鼎WebFont網頁字型為例,透過兩種方法簡單設定網頁字型,設定後即可用嵌入JS語法,呼叫Web FontJavaScript連結嵌入網站,完成WebFont套用,詳情可參考 教學文件

1. iFontCloud Web Font設定頁面挑選字型後自動設定

2. Web Font字型名稱寫在網站設定檔中(font-family)

 

WebFont就是一種以最實惠的價格,讓網頁效能極大化的服務,您還在等什麼呢?請參考網頁字型


Font Technology

文鼎UD晶熙黑體 TTC格式產品說明

TrueType Collections (TTC)允許將多個性質相近的字型合併為一個檔案,其目的是為了節省字型檔的資料量。以繁體中 文UD晶熙黑為例,針對43個常用全角符號做調和(Proporitional)設計,分別放在兩個不同的字體名稱上,使用者可以依 自己的喜好及需求,選擇常規的全角符號字型或是有標示P的常用全角符號調和設計產品。這兩套不同名稱的字體可以 合併成TTC,漢字和部分符號可共用,只要增加39個調和符號的資料量。合併後的TTC字檔和分開成兩個TTF字檔效果一 樣,卻可節省95%以上的資料量。

在我們對設計師的訪談中,我們聽到一個聲音,有設計師認為在進行長文排版時,全角位符號的字寬常常出現一些尷尬 的排版問題,如川流(river)、凸排等,影響著整體的閱讀感受。在理解設計師的困擾後,我們挑選了39個中文常用全角符 號,進行字寬調和(Proporitional)的設計,有此設計特點的產品,在字體名稱上都會多一個「P」,代表Proporitional的代 號。

以文鼎UD晶熙黑體E1HK字體為例,使用者在安裝字體後,在字體選單中會看到「文鼎UD晶熙黑體E1HK」與「文鼎UD晶 熙黑體PE1HK」兩個字體名稱,這是因為文鼎UD晶熙黑體E1HK字體檔案使用了上方描述的TrueType Collections (TTC) 的機制而呈現出來的結果。

 

下圖為文鼎UD晶熙黑體E1HK 產品使用常用全角符號及常用全角符號調和設計的排版示意圖,選用經過符號調和設計 的字體,排版後漢字、符號呈現出較佳的字寬比例,將有助於段落文字訊息閱讀的舒適性。

Font Technology

從名稱認識文鼎可變式字型

可變式字型(Variable Fonts)是OpenType字體格式的一種,這種字型格式可支援字重(weight)、寬度(width)、傾斜(slant, italic)、光學尺寸視覺調整(Optical size)等可變屬性的定義,使用者在應用時可以立即變化出一套字體家族的不同樣式。

可變式字型的特色在於可隨使用者的設定或是依應用程式的自動判斷,變化出將近無限種的字體屬性組合。只需要一個字型檔案,就可以無間段調整該字型提供的字重、字寬或對比等可變屬性,讓設計師用字的創意不再受侷限,同時也減少了龐大字體家族所需要的大量記憶體空間。

從字體名稱認識文鼎可變式字型

繁體中文字體名稱:

文鼎VF晶熙黑體_WrW / AR VF JXHeiB5 WrW

範例說明:

可變式字體 + 字體名稱 + 字集 + 變數軸

繁體中文的晶熙黑可變式字體,包含字重、字寬兩個變數軸

 

※軸代碼定義

Wl, Wr, Wu: 字重(weight)軸的極細段(light), 中間段(regular), 極粗段(ultra)

W: 字寬(width)軸

C: 對比(contrast)軸

G: 中宮(zhong gong)軸

H: 字高(height)軸

O: 光學尺寸視覺調整(optical size)軸(微字型, 標誌用字濃淡度調整)

S: 樣式(style)軸

 

字重字寬變數軸示意圖

以文鼎UD晶熙黑體可變式字體為例:

在設計品質考量下,包含字重、字寬兩個變數軸的「文鼎VF晶熙黑體_WrW」,可在字重Medium至Heavy,標準字寬至80%字寬 (Condense 80)範圍內無間斷調整。

而一個變數軸的文鼎VF晶熙黑體_Wl、文鼎VF晶熙黑體_Wr、文鼎VF晶熙黑體_Wu是做字重無間斷的調整。

Font Technology

units per em

字體設計的工程規格中,有個較少被人提及的專有名詞「UPM」,UPM全名為units per em。Em為字體設計上的一個單位,傳統上,em指的是活字印刷鉛字字身的高度;在現今數位字體設計上,EM化身一個虛擬的數位畫布,依字體設計的精細度需要,畫分出一個座標系統網格,這個座標系統大小的設定值最常見的是1000或2048,這個設定值,就稱為units per em,它決定了字體座標網格的粒度大小。


關於UPM數值的設定,基於TrueType和OpenType TT的字體,UPM的設定值通常為2048,而OpenType PS字體UPM的設定值通常為1000,但是也有設為256或512的情況發生,這樣主要是為了達到降低字體檔案的資料量或在特殊情境所需要的設定。

這些UPM設定值的大小除了與字體應用情境搭配外,在字體品質會有差異嗎?

我們以下方的圖例做說明,我們若將這三個圖形視為「點」來看,右方的點是基於UPM 256的設計,而左方的點是以UPM 2048作設計,我們可以看出兩者都有達到一般所認知「點」的概念,但若前提是「圓點」、「正圓」,那麼就一定是左方UPM 2048所設計的圖形才能符合標準。

也就是說,UPM值設定的越高,可以獲得更多包含曲線、造型等的設計細節,反過來說,若我們想要設計一款具備高品質、有細膩曲線描繪的字體產品,在UPM就會需要相對較高的設定值。

以中文字體產品來說,無論是TrueType或OpenType PS的字體,目前大多數的UPM設定都以1000為主,這是一個在產品品質與檔案量大小可以取得平衡的設定。