關於Web Font

網頁變換字型

Web Font 為網頁上替換字型的服務，網頁可讀取網路上的圖片、影音等多媒體資料，並且顯示，當然一樣也可以讀取字型。如同多媒體資料存放於網路平台上，提供網頁讀取，字型也一樣需要存放於網路平台上，否則網頁僅能讀取本地端的字型檔。雖然有安裝字型檔的裝置可以看到網頁上指定的字型，但是沒有安裝該字型檔的裝置卻是無法呈現，這個網頁呈現結果則會跳回裝置上預設的系統字型。也因為如此，網頁設計師精心設計的美好畫面，會因不同裝置環境而有差異性的呈現，造成網頁設計師的困擾。

網頁上字型的呈現

一般網頁上所使用字體，除了系統預設字體外，要顯示特殊的字體，若不採用Web Font的服務，都是透過文字轉成圖片方式顯示。網頁介面設計師先使用繪圖軟體將圖文編排好後，再轉換成圖檔呈現。

Web Font原理

在網頁中Web Font的使用方式，主要是由W3C協會所制定。如同W3C協會制定了在網頁上的樣式(CSS)呈現，W3C協會也制定了網頁上字體套用CSS後的呈現規範。在任何一個網頁中檢視原始碼，你一定會看到CSS語法的關鍵字font-family：

以上程式碼內容，指的是網頁在各平台字體呈現的順序，也就是說，如果觀看的使用者系統有安裝Helvetica Neue字體，則首先會被使用呈現，若無安裝則呈現第二順位的Helvetica字體，以此類推。由於每個平台所安裝的字體內容不一定一致，所以網頁在每個平台上所看到的字體顯示也會不一樣。而網頁介面設計師若套用此CSS語法改變字體，所改變的是網頁讀取本地端平台的字體順序，其實這個語法同樣也支援讀取雲端中的字體檔案。

雲端的字體檔案

把字體放在雲端上，讓網頁使用CSS語法的font-family去讀取，原則上是可以讓字體呈現，但會有兩個要點需要注意：
  1.瀏覽器的支援
  2.字體檔案的大小
每個瀏覽器對CSS語法的支援程度不同，同時對於字體檔案的支援程度也不一樣，並非每個瀏覽器都支援TrueType(*.ttf)格式或是OpenType(*.otf)格式，所以首先需要做格式上的轉換。目前市面上主流的Web Font格式，包含WOFF與EOT兩種格式，分別支援在IE、Chrome、Safari 與FireFox等主流的瀏覽器。
另外，當字體檔案放上雲端後，也必須考量字體檔案的容量，字型檔案太大，在網頁上顯示的速度相對就會變慢。日文字體檔案，因為包含上萬字數，所以相對於只包含純英文符號的字體檔案大得多。一般日文字體檔案動輒10MB以上，當一個網頁中若使用到該10MB的字體檔，不管網頁中用到的是一個字或是一千個字，瀏覽器會先把完整字體檔案下載後再做顯示。對於瀏覽者來說，開啟此網頁時，會先等候一陣子，待字體檔完整下載後才會呈現。對於伺服器端來說，整體主機效能會受到影響，網路傳輸的成本也將增加。因此在網頁上使用Web Font，若能針對不同的瀏覽器，提供對應的格式，並請進行大幅度的壓縮，即可一方面享有Web Font的優勢，另一方面又不被顯示效果及速度所困擾。

Web Font使用方式

一般Web Font使用方式分成兩種:
  1.插入CSS語法
  2.載入JavaScript
插入CSS語法是最直接的使用方式，CSS語法的內容，包含了字體的資訊以及檔案的來源，網頁設計師只要把該語法整合到自己的CSS文件中即可套用字體效果。
而載入JavaScript方式，能直接在程式碼中加入流程管控，如確認使用者的身分、確認使用的網域URL、確認可供使用的字體、確認該網頁使用到的字體並且轉檔、確認字體使用量等資訊。