我的網頁為什麼會眨眼

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

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

什麼是WebFont?!

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

 

為什麼要裝WebFont

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

 

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

 

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

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

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

 

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

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中文編碼字符集,及使用中國政府認證的中文字型產品才能順利做銷售。文鼎字型可以提供CESI認證的GB18030字型,授權給3C電子、通信廠商,做產品設計、製造及銷售,將字型內嵌於產品中,廠商不但不用擔心符合規範的問題,又可以取得功能上與成本上無可取代的優勢。

 

 
 
 
 
 
 
 
 

 

 

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。