什麼是WebFont?!

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

為什麼要裝WebFont

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

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

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

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

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

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

在前一篇文章「字符集：Big5與Unicode的差異」提到，我們在個人電腦上無法打出想要的字元或無法正確顯示字元，大多是因為使用的字型所支援的字符集涵蓋範圍的多寡而造成的缺字情況，這是設計師或一般使用者會遇到的缺字原因；還有一種是在公家機關或是企業的資訊系統中會遇到的缺字情況_因字型編碼相容的問題所造成的缺字。

很多公司企業財會單位使用的報表系統還是封閉型的系統環境，追求的是系統的安全性、正確性與穩定性，每一次系統的更新就需要一筆龐大的費用，因此，若無重大使用上的問題，在預算考量上往往會選擇沿用現有系統，而不耗費預算升級到新系統。在這樣的情況下，使用單位/公司有可能會因為報表系統比較老舊，只能支援Big5字集，以至於開發的系統軟體無法使用Unicode字集字型顯示，造成列印、輸出漏字或亂碼的情況，此時就會需要透過Big5造字碼位來進行造字。

什麼是造字碼位，由於現在的Windows系統內碼是使用Unicode編碼，但如果我們使用的應用軟體無法直接支援Unicode編碼，就必須要將Unicode資料轉換成Big5編碼的資料，在Big5編碼的碼區裡有定義四個區域可以用來存放使用者造字，我們可以把Big5字集不包含的Unicode編碼的字，依照我們的需求將其存放在這四個造字區內。如此一來，就可以像古代倉頡造字那樣，為自己的資訊系統環境添加一些造字，解決在Big5編碼範圍內，電腦環境中無法正確顯示Unicode編碼的字之困擾。

不過，因為每個機關所使用到造字的時機與難字不全然相同，所以同樣的造字碼位所存放的難字在A機關與B機關通常是不一樣，因此使用造字碼位所存放的資料是無法直接互相交換，需要透過另一個CNS11643資訊交換碼來串接交換，讓資訊在交換的過程中不會缺漏。

微軟雖有提供造字編輯程式，可以供使用者使用，以編輯點陣圖的方式造字，雖然介面較為簡易上手，但需要以畫格子的方式逐一將字元圖像點畫出來，在美感上不是那麼好看也較費時。

文鼎了解機關企業的造字需求，開發了更為便利的造字管理系統，以解決造字編輯美觀、便利性的問題，如此一來，就可以輕鬆解決缺字的問題。資訊交換的問題，文鼎也可以協助您。

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