font-face自定義字體

做網站的時候，有時候會遇到某些字體系統里面沒有自帶。可能更多的時候我們會選擇以圖替文的方式來做。用圖片的話不利於圖片的放大縮小，更好的辦法是我們可以自定義字體。

當然，在實際運用中我們需要權衡一下自定義字體的利弊。自定義字體的話，我們需要引入多種格式，如下圖：

所以，如果自定義字體的話必然會增加網頁的體積，尤其是中文格式。

自定義字體的方法如下：

1.找到這個字體的ttf格式，再用字體轉換工具轉換成不同的格式。

常見的字體格式轉換工具有：FontsQuirrel、onlinefontconverter（個人比較喜歡用這個）。

2.利用css自定義字體：

@font-face {
    font-family: 'Playbill';  /*給自定義字體命名*/
    src: url('Playbill.eot');
    src: url('Playbill.eot?#iefix') format('eot'),
         url('Playbill.woff') format('woff'),
         url('Playbill.ttf') format('truetype'),
         url('Playbill.svg#webfontjKg17VrE') format('svg');
}

3.在你需要的地方引用字體：

body{font-family:"Playbill"}

ok!就這三步，大功告成！