Web Font(1)-網頁也可以不一樣

網頁字型已經行之有年,國外大大小小的網站都可以看到不同字體顯示,只要連結檔案就能看到效果,多數文字再也不必依賴圖片製作,不但方便還減少檔案大小,一舉兩得~
以下紀錄如何使用Web font,內容若有誤還請指正,謝謝。

如果要在本機端使用字型,可以使用@font-face:

然後在要使用字型的部份加入font-family即可。

其中字型路徑可以分別載入不同檔案格式,因為不同瀏覽器支援的字型不盡相同,有以下格式:
.ttf:

.eot:

.woff:

關於.woff格式資訊:https://developer.mozilla.org/zh-TW/docs/Web/Guide/WOFF

.svg:

support
這張圖片就是以上格式會支援的瀏覽器囉~
圖片來自http://www.html5rocks.com/en/tutorials/webfonts/quick/

想支援各家瀏覽器但是沒有字型檔的話,只要檔案合法,可以利用Font Squirrel幫轉唷,設定好下載檔案即可,連CSS都幫你寫好了xD。
Font Squirrel WEBFONT GENERATOR:http://www.fontsquirrel.com/tools/webfont-generator

如果不需要本機端連線或者嫌麻煩,那麼Google Fonts就是最佳選擇!
Google Fonts:http://www.google.com/fonts
使用方法也很簡單,選擇字型後按Quick Use,複製頁面上的連結以及font-family到自己的頁面上就可以囉!

那麼中文的部份呢?
像是推行網路字型不遺餘力的justfont:http://www.justfont.com/
還有文鼎的雲端字型:http://webfont.arphic.com/
以及fonts.com:http://www.fonts.com/

真的要感謝更新技術,賦予網頁有更加完美的顯示的人們,終於…不用煩惱網頁還是少些甚麼了xD
本文同步發表於http://ithelp.ithome.com.tw/question/10139717

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Time limit is exhausted. Please reload the CAPTCHA.