由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

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為主,這是一個在產品品質與檔案量大小可以取得平衡的設定。

Font Technology

OpenType 1.9規格支援彩色漸變向量字型

OpenType規格上一次重大的變更是在2016年9月釋出的1.8版本,它加入了可變式字型(Variable Font)的規格,至今5年已有許多可變式字型推出上市,有些訂製字型專案客戶也會要求提供可變式字型,不過台灣的字體廠商只有文鼎有發行可變式字型產品。

2021年12月OpenType 規格再次重磅更新¬釋出1.9版本,其中最主要的是對彩色漸變向量字型的支援(縮寫為COLRv1)。以下為讀者做簡要的介紹:
(1) OpenType色彩定義表(COLR)內的顏色從原本的單一顏色擴充為可以有漸層的變化,以下範例可以很明顯地看出兩個規格版本的色彩差異:

COLRv0:

COLRv1:


(2) 另外,在COLR表的前一版COLRv0雖然也支援可變式字型(variable font),但只是字符外框可變,對於字符定義的顏色是不可以變更的;而COLRv1版本就有支援顏色可變的功能,可以在可變字體中加入調整顏色的變數軸。國外的underware字型設計公司已在2022年初發表了一組顏色可變的字體Plakato Color

由於此新的技術規格才剛發表,一般編輯軟體都尚未支援,截至此文編輯時,已支援COLRv1的應用軟體只有Chrome核心的瀏覽器,預期其他主流的瀏覽器及編輯軟體也會很快的支援這種炫彩的COLRv1彩色漸變向量字型。也可期待市場上會有更多的彩色向量字型,特別是Emoji表情符號,可以讓用戶選擇使用。
 

參考資訊:

Font Technology

消除繁體中文缺字的困擾

流行音樂創作歌手陶喆,常看到他的名字是用「陶吉吉」的方式顯示,而非直接寫出「喆」,為什麼有一些字型「喆」呈現不出來?必須用兩個吉來表示呢? 

繁體中文最常使用的字體規格為Big5-2003(大五碼),共收錄13,060個漢字。但是,身處數位時代的使用者,文字的使用大多透過輸入法的方式呈現在軟體上,有時候有可能是因為使用者輸入文字時,選字錯誤,積非成是,有時候也有可能是當下標新立異,選型不選字,取「意」不取「義」,透過輸入法輸入、貼文複製,而用到非Big5字集的字元,而造成缺字的情形。

為了降低使用者用字缺字的機率,文鼎字型以現有Big5-2003字集為基礎,參考教育部字頻總表、中研院現代漢語語料庫詞頻統計、網路流行用字以及行銷與客戶服務所累積的資訊,彙整389個漢字,整合成Big5_AR 2021規格。新增收錄於Big5_AR 2021規格的字元,包含塵蟎的「蟎」、擀麵的「擀」、尊稱神明的「祢」、峰的異體字「峯」以及双、堃、宝、峯、崐、彣、喆、雫、邨……。



文鼎字型已著手規劃,挑選經典、熱銷的字型產品逐步更新為Big5_AR 2021規格,目前已經更新至此規格的字型產品有:文鼎書苑宋體、文鼎書苑黑體、文鼎簽字筆體、文鼎DC蔡燊軒行書體; iFontCloud文鼎雲字庫字體租賃服務的客戶,已下載啟用這些字型的使用者,在租賃期間,字檔會透過字庫管理工具自動地做檔案更新,若您是第一次下載啟用,則會直接取得最新字型檔案。未來,文鼎字型所開發的新產品,也會依此規格做產品化。