一招教你搞定WebFont網頁瞬閃問題

如果你的網頁使用了Web Font，你可能或多或少會收到網站的使用者告訴你：欸，為什麼你的網頁字會閃一下？這時，你可能納悶什麼叫做閃一下，開了網頁後，卻又沒看到使用者描述的狀況。這其實是CSS加上網路速度的問題：在還未將Web Font字型下載完成前，會先以系統預設字型顯示頁面，等到下載完成才套用到已顯示在瀏覽器的字型上。也因為如此，如果瀏覽網頁的電腦網路不夠快，可能會發生已經頁面載入完畢了，Web Font的內容隔了1~2秒才接著載完並套用，此時，就會發生所謂的「眨眼」現象了。

這樣的問題，我們可以透過加入以下CSS的方式，告訴網頁在確認Web Font狀態前，就算頁面內容載入完畢，也先將文字隱藏起來，直到確認了Web Font的狀態後，再將文字顯示，這樣就可以避免瀏覽網頁時出現文字瞬閃了！

code
.arwf-loading body { /*Web Font正在載入中，不顯示文字*/
          opacity: 0;
          visibility: hidden;
}
.arwf-active body { /*Web Font處理成功，直接顯示文字*/
          opacity: 1;
          visibility: visible;
}
.arwf-inactive body {/*如果Web Font處理失敗，直接顯示文字*/
         opacity: 1;
         visibility: visible;
}

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表情符號，可以讓用戶選擇使用。
 

參考資訊:

• Chrome 98支援COLRv1彩色漸變向量字  https://developer.chrome.com/blog/colrv1-fonts/
• 現有瀏覽器版本支援COLRv1的列表: https://caniuse.com/?search=colrv1

我們在輸入文字的時候，有時候是不是會遇到字元無法顯示的缺字情形呢？缺字有可能是許多情況造成的，但最常見的情況是缺的這個字，沒有收錄在Big-5字符集裡，這時候，使用支援Unicode 2.0或3.0字符集的字型，大多可以解決缺字的情況。

什麼是Big-5

Big-5 又稱為大五碼，是最常使用的繁體中文字符集，共收錄13,060 個漢字，及441 個全角符號。Big-5 普遍使用於台灣、香港與澳門等地區，唯它並非當地的國家標準，只是業界標準，最新版本是Big5-2003。

什麼是Unicode

Unicode 是全球通用的字元編碼，收錄了世界上所有國家及地區的文字及符號，在1991 年首次發佈了The Unicode Standard，目前最新的版本為Unicode 13。而繁體中文普遍使用的Unicode 3.0共收錄27,484 個漢字，而2005 年發佈的Unicode 4.1 已收錄超過10萬字。

Big-5與Unicode的差異

很多人常常會把兩者相互比較，而到底兩個的差異在哪呢，簡單來說，我們可以用支援字數多、寡來做區隔，用一個比較簡單的方式來比喻，把Unicode想像成裝雞蛋的大籃子，Big-5則是大籃子中的小籃子，而這些字碼則是籃中的雞蛋。前面我們提到，Big5-包含有13,060個漢字，其包含在Unicode的大籃子中，因此，可以解釋成Big-5是Unicode的其中一部分。所以在一般Windows作業系統中常會有打不出來的字，或是出現亂碼，很大的原因是因為Big-5的範圍內沒有支援到Unicode的字，已經做超出小籃子的負荷了。

如果出現這樣的情況，通常選擇使用援Unicode 2.0或3.0字符集的中文字型，大多可以解決缺字的情況。要如何選擇、使用文鼎公司繁體中文有支援Unicode字符集產品呢？最簡易的方式就是在iFontCloud網站字型頁面上輸入「U30」這個關鍵字，就可以看到有支援Unicode 3.0這種大字符集的字型產品，目前共有25個字型檔案可以選擇使用。

在產品上，Big-5與Unicode這兩個字符集的產品要如何分別呢？以文鼎UD晶熙黑體為例，在字型名稱上若有看到U30，即表示這個字型產品是支援Unicode 3.0字符集的產品，若沒有看到標示，則為Big-5字符集的產品，如文鼎UD晶熙黑體U30與文鼎UD晶熙黑體U30。