Web Font網頁字型

想讓網頁美美的呈現在瀏覽者的面前，許多網站常常仰賴平面設計師來處理相關的圖文排版。然而，平面與程式設計之間往往又有一道看不見的鴻溝，讓已有想法的平面設計師們，不曉得該如何將概念在網頁上付諸實現，因此結果變成：把要展現的內容、字型、圖片，排完之後做成一張更大的圖片，然後將圖片丟到網站的頁面上。這種利用製作成圖片的方式來編排內容的方式，給了平面設計師最無痛的Solution，可以在許多中小型電商和使用CMS(Content Management System，內容管理系統)的網站中發現。另外，不想網頁永遠只有新細明體(現在流行起微軟正黑體)，而想要運用更適合的字型來呈現頁面，以往的方式似乎也只有將內容先套用字型後再輸出為圖片一途。

儘管這種方式，可以不透過編寫程式與設定標籤來完成網頁編輯，但搜尋引擎並無法解析圖片中的文字內容，當網路蜘蛛無法爬出網頁中的內容時，這些內容就很難被關鍵字所連結。想想看，要賣一雙「會飛的鞋子」，但你的客戶卻沒辦法估狗這些關鍵字找到你的網站會是多麼可惜。

將文字做成圖片會增加網頁載入時的流量，甚至造成關鍵字與排名落後。

Web Font(網頁字型)技術，提供網頁設計時套用各種字型於文字上，並顯示給所有瀏覽網頁的人。仔細看看，包含本篇文章，所有iFontCloud網頁中的文字都套用了熱門的「文鼎UD晶熙黑體」，你依舊可以選取這些文字，不需要每增修一次網頁內容就得重做一張圖片。

Alexa.com網站排名的計算是以網站的使用流量、熱門度、互動率、曝光度等資訊為基礎，並以不同比重的加權總分作為排名。由於Alexa的取樣數量相當大，且主要參考依據為現今網路世界的主流瀏覽器(Internet Explorer、Firefox和Google Chrome…)，因此一般仍被最廣泛用於評估網站的受歡迎度。

Web Font技術的使用在國外行之有年，根據Http Archive就Alexa.com的排名中的前一千大網站分析，到2013年為止有在首頁套用Web Font的網站是23%，到了2014年成長到43%，比例不少，是吧？Google Fonts更針對Alexa.com 2013年排名中的每一個頁面分析，發現：

前1M網站使用Web Font比例為46%

前10K網站使用Web Font比例為65%

前百大網站使用Web Font比例為73%

這些數據透露了一個訊息：越熱門的網站使用Web Font的比例越高。無論是為了選擇更適合的字型或是讓使用者經驗一致(RWD網頁可以針對不同的載具選擇不同粗細的字型，讓小螢幕上顯示的字不會糊成一團)，Web Font在歐美國家也醞釀超過3年，從2013年開始有跳躍性的成長，明顯的證據是，Adobe Typekit分析了2014年8月份銷售額，排出美國十大汽車廠商，全部套用了Web Font技術。

那麼為什麼亞洲使用Web Font這麼少呢，主要的原因還是在於字數的差異。完成一套英文字型，包含了26個字母與各種標點符號零零總總也不過百來個字，開玩笑，我們常用的中文字就超過一萬了欸(突然覺得中文博大精深)！也因為這樣的差距，中文的Web Font無法像英歐文可以直接下載所有字型到瀏覽器上顯示，必須先分析網頁中的所有文字後通知WebFont伺服器，請伺服器只要傳這些字就好，這種技術我們稱之為文字的Dynamic Subsetting。

以iFontCloud的Web Font服務流程舉例：當使用者點了一個套用Web Font的網址，網頁中的JavaScript會分析頁面中所有的文字後通知Web Font伺服器，伺服器針對匹配的字型抓出對應的文字後，組成一份包含所有頁面文字的字型檔提供網頁下載並套用。這樣不論是在任何裝置上瀏覽網站，都可以看到裝置本身所沒有的字型。

在後台設定好標籤對應的字型，再將提供的JS連結放到網頁HEAD下即可。