CSS3 中的自訂字型

記得以前寫作 webpage ，一看到靚的字型想用，有經驗的人一定會告訴你，沒裝這字型的電腦是顯示不到那效果的，除非將它轉成圖片吧。於是靚字型只能存在於圖片，每次轉顏色或大小，又要再轉過。而且用圖片代替字型，還諸多不便：搜尋引擎找不到、下載會較慢、不能放大縮少等。


所以 CSS3 加進 font-face，是最好用的功能之一。它容許你自訂字型，只要將字型轉換為適當的格式，便可用以下的　CSS 自行定義新的字義，任何支援 css3 的瀏覽器也可以用。這可令你的網頁更漂亮、更有個性。當然，在顯示這些自訂字型前，瀏覽器會在背後下載字型檔，所以字型檔不能太大太多，不然會影響瀏覽速度的。

要自訂字型的話只需：

@font-face {  
    font-family: 'EntypoRegular';  
    src: url('font/entypo-webfont.eot');  
    src: url('font/entypo-webfont.eot?#iefix') format('embedded-opentype'),  
         url('font/entypo-webfont.woff') format('woff'),  
         url('font/entypo-webfont.ttf') format('truetype'),  
         url('font/entypo-webfont.svg#EntypoRegular') format('svg');  

然後便可使用在 css rule 中：

.use_new_font{
  font-family: 'EntypoRegular';
}

大功告成！

網上已有很多字型可以免費使用，最方便的當然是 Google Web Fonts，連字型檔也不需放在自己的 web server 上，而且還告訴它你會用那字元，它會替你最佳化字型檔（只包含你需要的字型），減低下載的檔案大小。

聰明如你一定知道，現在大部份字型檔皆是西方語系。因為東方的字元太多，要弄一款字型所需的功夫很多，而且檔案也會比英文的大很多，所以中文的 web font 很少。不過也未至於沒有，justfont 就提供的中文 web font 服務，效果不錯，遲點會試用一下。

用自訂字型還有一個好處，便是用來做 icon 了。用圖示字型做圖示，可以隨意加進連結、按鈕或標題，非常方便。網上的資源亦很豐富，如 Iconic、Entypo、Font Awesome 等。 2learn2teach 就是用了 Entypo 來做圖示，效果很好，字型放大到 130 也沒問題。