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!就这三步，大功告成！