我的網頁為什麼會眨眼

2019-04-25 15:03:03.327

分類: Font Technology

一招教你搞定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;
}


Font Technology

字符集:Big5與Unicode的差異

我們在輸入文字的時候,有時候是不是會遇到字元無法顯示的缺字情形呢?缺字有可能是許多情況造成的,但最常見的情況是缺的這個字,沒有收錄在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。

 

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