我的網頁為什麼會眨眼

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

微字型

文鼎公司關注到字型產品除了設計上創意的專注外,也考量到應用面用字的需求,如小字號文字閱讀的清晰度、辨識度。

一款字型產品是如何的被決策出來做量產的,首先要評估的是產品會被用在哪裡?決定了使用目的,依情境定義使用字號(font size),有了這些後,才會有後續的設計規格的延伸。回到設計師的字體應用情境,在執行設計案件時,字型對於設計師來說是眾多設計素材之一,但在資訊訊息呈現,字型一定是一個重要的選擇。文鼎公司關注到字型產品除了設計上創意的專注外,也考量到應用面用字的需求,我們看到了字型在設計上被使用在小字號的需要,也看到了閱讀上,小字號文字清晰度、辨識度上的重要性,因此在字體設計與造字工程上進行整合,開發出一系列專屬使用在小字號情境的微字型產品。

在鉛字印刷時代,每個字號鉛字有著固定的物理大小,我們以築地明潮體舉例,可以看到上方的那排是築地明朝初號到六號放大到一致大小的情況,下方是文鼎上海宋實際使用大小的示意圖,透過觀察,用於內文小字的六號字(8pt)與標題大字的二號字(21pt)兩者在筆畫細節處有著設計的差異,以筆尾末端的設計為例,因為二號字呈現的字號較小,因此需要稍微加重筆尾的厚度,使其在顯示時不至於虛掉、灰掉,而用於大字的二號字,是要清楚呈現明體的特徵,因此做較細緻的設計。這是早期鉛字在設計上考量實務用字大小所做的設計因應,但數位字體使用的媒介與情境與以往有很大的不同,特別是向量字可以任意縮放大小的特性,這絕對不是鉛字可以比擬的;然而若是使用在如六號字(8pt)的大小,字體是否還可以清晰地呈現呢?

以文鼎UD晶熙黑體為例,雖然晶熙黑在設計之初,已經考量印刷、螢幕顯示的使用,但因漢字筆畫多、寡的對比情況在極小字的使用情境下,仍然會有糊字影響到視覺效果,以下圖左右兩邊的對照來看,右方的微字型與左邊標準版的晶熙黑體,在閱讀視覺上所形成的跳躍,已經明顯的降低。

微字型產品是如何達到這樣的效果呢?關鍵是設計師將漢字由筆畫多寡由少至多作排序,透過設計師與工程師的合作,筆畫少的字元,不改變筆畫的粗細,筆畫多的字元,依視覺灰度做筆畫粗細漸進的調整,來達到小字顯示時降低糊字的情形,因此,微字型的產品特別適用在3-8P的環境,相對的,若是標題以上的大字號顯示,則建議選用標準版的產品。

下圖是由美可特品牌企劃設計應用文鼎UD晶熙黑體微字型所設計的面膜包裝,我們將重點放在背後的用字上,回到字型選擇應用面的考量,透過畫面,我們可以感受到這些字的使用size是很小的,如何在小字保有清晰的顯示,是這個案件選用微字型產品的要點。

 

目前已經開發完成的微字型產品,造型為經典的黑體與圓體,語言包含繁體中文、簡體中文,其中文鼎UD晶熙黑體微字型產品支援Unicode 3.0 及GB 18030大字集的規格,降低設計師在排版缺字的機率,提升使用感受。繁體中文晶熙黑體微字型也將長體字型納入,排版上有利於有空間限制的版面容納較多的文字資訊。微字型產品的推出獲得了設計師的肯定,未來也會持續開發將新的微字型產品,想要了解詳細文鼎微字型產品的支援情況,歡迎前往文鼎iFontCloud瀏覽。

 

點我前往>文鼎iFontCloud_微字型

 

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

GB18030中文編碼字符集

GB18030是中國大陸規範的的漢字編碼字符集標準,GB 18030-2005共收錄漢字70,244個。

目前GB18030有GB18030-2000 及GB18030-2005兩個版本,2000年發佈的GB18030-2000,全名是《信息技術 漢字編碼字符集 基本集的擴充》。GB18030-2000僅規定了常用非漢字符號和27,533個漢字(包括部首、部件等)的編碼,GB18030-2000是一個強制性的標準,市場上銷售的產品用字必須符合其規範。而2005年發佈的GB18030-2005在GB18030-2000的基礎上增加了42,711個漢字和多種中國少數民族文字的編碼,增加的這些內容是推薦性質,無強制規範。

簡要來說,目前若提到GB18030規格的產品,其對應的標準為GB18030-2005,其中27,533個漢字為基本必要的強制規範範圍。

 

什麼時候需要使用到GB18030字集的字體/ GB18030字集的使用範圍

由於GB18030字集的字元數多達兩萬多字,一般來說,在簡體中文的使用情境,基本的GB2312規格已經足夠使用,但在需要顯示中文姓氏、人名、地名等情況時,由於中文漢字的特性,在上述情況可會出現罕用字的使用,這時候就需要使用GB18030字集的字體來做排版,避免出現缺漏字的情況。

2005年11月發佈的GB 18030-2005版本中文編碼字符集,已要求各種電腦作業系統、字型產品、輸入法、應用軟體、及內建嵌入式系統的3C電子、通信設備,如Smart Phone、Tablet、印表機等周邊設備,要支援GB 18030字集。

 

 

中國大陸編碼標準的演進

1980年頒佈了第一個漢字編碼字元集標準,為GB 2312-80《資訊交換用漢字編碼字符集基本集》。此標準總共定義8,836個碼位,收納了6,763個漢字及682個常用符號,總共有7,445個字元。此規格在早期幾乎是唯一的標準,即使到目前為止,在中國大陸也是電腦系統、軟體及各種設備使用最廣泛的中文編碼標準。

1995年中國全國信息技術標準化技術委員會公佈了【漢字內碼擴展規範(GBK)】, GBK(K是"擴展"的漢語拼音第一個字母),總共定義23,940個碼位,收錄了21,003個漢字與884個符號共21,887個字元。

2000年國際標準組織ISO又公佈了ISO 10646-1:2000(Unicode 3.0),主要是增加中日韓統一漢字Extension A的6,582個字元。大陸的GBK規格已無法容納新增的字元,因此GB18030-2000編碼標準就在原來的 GB2312-1980 編碼標準和 GBK 編碼標準的基礎上進行擴充。

 

字型產品與GB 18030的關係

中國政府對中文字型,尤其是簡體中文字型,訂定有國家檢測認證的標準,尤其是最常使用的4種造型字型:宋、仿、楷、黑,要求使用字型於產品顯示的3C通信、資訊、電子等廠商,必須使用政府認證的字型。一般常用的點陣字型(Bitmap Font),如12x12、16x16、32x32、 …等等,都有強制性標準。也就是說要向大陸官方購買取得公司使用授權,再將字型載入嵌入式系統產品上,如手機,電子字典、印表機等,這些產品才能銷售到大陸。

大陸對於向量字型的規範,採取審查核准使用的方式,簡體中文字體的認證,由中國政府的信標委及CESI (中國電子技術標準化研究所)負責,中國政府為避免各家字型公司,所開發的簡體字型品質不一,由中國官方特別指定的認證單位,訂定規範、製作、授權標準,針對在大陸地區使用之簡體字型之完整性、正確性、規範性、風格一致性、結構合理性等進行審核。因此,在中國所有使用於3C通信、資訊、電子等產品上之簡體中文字型,都必需是取得CESI認證的字型。因此對於採用TTF等向量字型的裝置設備,例如智慧手機、平板電腦、DTV/STB…等,就可以使用向量字型來取代需官方授權的點陣字型。

目前為止,文鼎已有11套字型取得CESI認證規範,分別是五套GB18030字集,六套GB2312字集,字型清單如下:

項次

字集

文鼎中文字型

1

GB18030

文鼎報宋二

2

文鼎中楷

3

文鼎晶栩楷體

4

文鼎晶栩黑體

5

文鼎UD晶熙黑體

6

GB2312

文鼎UD晶熙黑體

7

文鼎粗黑

8

文鼎書林黑_L

9

文鼎書林黑_M

10

文鼎Mobile中黑

11

文鼎书苑黑体B

 

總結

在中國市場銷售3C電子、通信產品的國內外廠商,都已了解要進入中國市場,無論是軟體產品或硬體產品,必須採用中國政府標準規範的GB18030中文編碼字符集,及使用中國政府認證的中文字型產品才能順利做銷售。文鼎字型可以提供認證的GB18030字型,授權給3C電子、通信廠商,做產品設計、製造及銷售,將字型內嵌於產品中,廠商不但不用擔心符合規範的問題,又可以取得功能上與成本上無可取代的優勢。