制作网站难免有些字体不是默认的，得通过@font-face来加载自己特定的字体，来实现特定的文字效果。在本篇文章我将给大家介绍

@font-face免费且常用方法并解释各种方法的利弊，具体在自己的项目中怎么使用，还是的读者自己去度量。

（1）CSS3@font-face
首先让我们来谈谈原生态的方式来实现自定义网页字体@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://www.mamicode.com/‘http://fonts.googleapis.com/css?family=Arvo‘ rel=‘stylesheet‘ type=‘text/css‘>

这种方法的优势很明显加载快，轻量级且免费，但也有不足之处就是大多数字体提供的样式不多

总的来说不管怎么样第二种方法是目前最适合的方法


线上制作字体地址：http://www.fontsquirrel.com/fontface/generator

在线字体转换