制作网站难免有些字体不是默认的，得通过@font-face来加载自己特定的字体，来实现特定的文字效果。在本篇文章我将给大家介绍
@font-face免费且常用方法并解释各种方法的利弊，具体在自己的项目中怎么使用，还是的读者自己去度量。
（1）[email protected]
首先让我们来谈谈原生态的方式来实现自定义网页字体@font-face的方法，声明一个自定义@font-face的CSS语法是很简单的。基本上只要
你指定字体名和字体文件的路径，一旦指定字体，你就可以将它应用于任何元素。
@font-face {
font-family: "Custom Font Name"; //定义字体名
src: url(‘font.ttf‘); //字体文件路径
}
body {
font-family: "Custom Font Name";
}
但是不同的浏览器支持不同格式的字体，如 IE只支持EOT格式的字体，Firefox支持EOT和TTF格式，Safari支持OTF,TTF和SVG格式字体；显
然我们网站也是要给IE浏览者的看的，所以上一种普通的方法显然无法满足我们要求，所以我们需要更为复杂并适合所有浏览器的方法
@font-face {
font-family: ‘MyWebFont‘;
src: url(‘webfont.eot‘); /* IE9*/
src: url(‘webfont.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
url(‘webfont.woff‘) format(‘woff‘), /* Modern Browsers */
url(‘webfont.ttf‘) format(‘truetype‘), /* Safari, Android, iOS */
url(‘webfont.svg#svgFontName‘) format(‘svg‘); /* Legacy iOS */
}
这种方法呢优势是可以将字体放在自己的服务器上，任自己调试，但缺点是比较复杂，且需要将字体生成不同的格式（这里有个生成字体
格式的在线工具：http://www.fontsquirrel.com/fontface/generator）,字体加载慢
（2）google网页字体
google网页字体http://www.google.com/webfonts/unsupported.html无疑是网页设计者的最佳帮手，只需加载简简单单的几行代码就可以
将字体应用到自己的网页中去；代码如下
<link href=‘http://fonts.googleapis.com/css?family=Arvo‘ rel=‘stylesheet‘ type=‘text/css‘>
这种方法的优势很明显加载快，轻量级且免费，但也有不足之处就是大多数字体提供的样式不多
总的来说不管怎么样第二种方法是目前最适合的方法
线上制作字体地址：http://www.fontsquirrel.com/fontface/generator