什麼是WebFont?!

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

為什麼要裝WebFont

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

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

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

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

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

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

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