CSS3新特性(04)：@font-face

@font-face是CSS3新特性中的一个模块，今天就来介绍下它。它主要是把自定义的Web字体嵌入到你的网页中。说白了就是可以帮助你在网页上使用漂亮的特殊字体，即非Web安全字体.

而不用担心，你的网页发布以后，浏览者的电脑万一没安装这个字体就坏事了的情况。一般不是专业从业人员，如设计师，普通网友的字体库是不会装太多字体的。所以@font-face就派上用处了。

@font-face怎么用？

(1)@font-face的语法：

@font-face {
    font-family: 'Your Web Font Name';
    font-weight:normal;
    src: url('fonts/YourWebFontName.eot');
    src: url('fonts/YourWebFontName.eot') format('eot'),
         url('fonts/YourWebFontName.woff2') format('woff2'),
         url('fonts/YourWebFontName.woff') format('woff'),
         url('fonts/YourWebFontName.ttf') format('ttf'),
         url('fonts/YourWebFontName.svg') format('svg');
}
 
p { font-family: 'Your Web Font Name', serif; }

当然还有这种写法的：

@font-face{
 
font-family:'Your Web Font Name';
font-weight:normal;
src:url('YourWebFontName.eot?')format('eot')/*IE*/,
src:local('YourWebFontName'),
    url('fonts/YourWebFontName.woff2') format('woff2'),
    url('fonts/YourWebFontName.woff') format('woff'),
    url('fonts/YourWebFontName.ttf') format('ttf'),
    url('fonts/YourWebFontName.svg') format('svg');/*Not for IE*/
}
p { font-family: 'Your Web Font Name', serif; }

（2）语法解析YourWebFontName：指你自定义字体的名称，最好使用你下载字体的默认名称，他将被引用到你Web元素中的font-family里。url：里面填你下载要用字体的绝对或相对地址。比如url('../gebz/pts55f-webfont.woff')。format('woff')：括号中填字体的格式，主要用于帮助浏览器识别。一般有ttf,otf,woff,eot,svg几种常见字体格式，这个下面会介绍）。

第二种写法中的local是一种hack的手法。目的是保护IE浏览器。如果没有这句，IE会尝试将第二个src描述符的值读作一个路径，并向服务器发出一个额外无用的请求。特地写了第一个src的目的也是为了保证IE能读到正确路径。具体可参看《CSS3实用指南》ZM. Gillenwater. 页码P112-P114。

另外这种写法在Android系统中会有BUG，感兴趣的同学可以看看《BestPracticeFor@Font-Face》。改进方法可以写两个@font-face,一个兼容IE，另一个非IE。比如：

@font-face{
 
font-family:'Your Web Font Name';
font-weight:normal;
src:url('YourWebFontName.eot?')format('eot')/*IE*/,
}
 
@font-face{
 
font-family:'Your Web Font Name';
font-weight:normal;
src: url(//:) format("no404"),
     url('fonts/YourWebFontName.woff2') format('woff2'),
     url('fonts/YourWebFontName.woff') format('woff'),
     url('fonts/YourWebFontName.ttf') format('ttf'),
     url('fonts/YourWebFontName.svg') format('svg');/*Not for IE*/
 
}
p { font-family: 'Your Web Font Name', serif; }

url(//:)format("no404")是一种Bulletproof写法，感兴趣的同学可看《New@Font-FaceSyntax:Simpler,Easier》一文。另外，为了使@font-face达到更多的浏览器支持，PaulIrish写了一个独特的@font-face语法叫《Bulletproof@font-face》。

字体格式以及支持的浏览器

• TureType(.ttf)格式
  (.ttf)字体是Windows和Mac的最常见字体，是一种RAW格式，因此他不为网站优化，支持这种字体的浏览器有:
  (IE9+,FF3.5+ Chrome4+,Safari3+,Opera10+,IOSMobileSafari4.2+）

• OpenType(.otf)格式
  (.otf)字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能，支持这种字体的浏览器有：
  （FF3.5+ ,Chrome4.0+,Safari3.1+,Opera10.0+,IOSMobile Safari4.2+）

• Web Open Font Format(.woff)格式
  (.woff)字体是Web字体中最佳格式，可以看作是 TrueType、OpenType 字体数据的简单重新封装，不过内建了压缩功能，因而体积更小、方便下载和传播。另外还支持元数据，所以厂商可以在他们的字体中加入相关识别信息。支持这种字体的浏览器有：
  （IE9+,FF3.5+,Chrome6+,Safari3.6,Opera11.1+）

• Embedded Open Type(.eot)格式
  (.eot)字体是IE的专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有：（IE4+）

• SVG（.svg）格式
  （.svg）字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有：
  （Chrome4+,Safari3.1+,Opera10.0+,ISO MobileSafari3.2+）

内容	IE6IE7IE8	FF3.5+	Chrome	Safari	Opera
.ttf,.otf	不支持	支持	支持	支持	支持
.eot	支持	不支持	不支持	不支持	不支持
.svg	不支持	不支持	支持	支持	支持
woff	不支持	支持	支持	支持	支持

由上面可以得出：.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持。
当然这些不同的字体格式哪里来呢？网上有一些专门的字体格式转换的网站。

在线字体格式转换网站

（1）Fontsquirrel
主要是英文字体转换，上传你已有的字体格式以后，进行转换就可以得到一个装有多种字体的压缩文件，解压缩后，里面除了@font-face所需要的众字体格式外，还带有一个DEMO文件，不明白怎么使用的，可以看一下这个DEMO文件，但千万别复制DEMO文件，要不然我上面的语法解析就白讲了。

上传你的字体文件，然后选择中间的OPTIMAL推荐最佳格式，然后就可以转换了。

（2）EveryThingFonts
当上面的Fontsquirrel网登不上用不了时，可以选择在EveryThingFonts网试一试，可以下载中文字体，是我新发现的在线字体格式转换网站，也是我最近常用的工具，非常推荐，比Fontsquirrel网稳定。鼠标滑块将No滑为Yes，点击Pick Font File上传你已有的字体，然后点击Convert进行转换即可。

@font-face使用小结

如果你的项目中是英文网站，而且项目中的LOGO，TAGS等应用到较多的特殊字体效果，则比较建议用@font-face，但如果是中文网站，还是使用图片比较合适，因为加载英文字体和图片没多大区别，但是加载中文字体可能会影响性能优化，因为中文一套字体一般要3-6M，这样的庞然大物嵌入网页上，结果可想而知，在页面加载完成前已经被关掉了。

当然，不是说中文就无法通过@font-face实现嵌入，但需要再麻烦一步：按需截取（根据文章所涉及到的文字生成小字库），中文的无论如何都要先截取一下的。如此便能最大程度地节约流量，将字体减到最小。

看到漂亮字体不知是啥字体咋办？

最后推荐一个用图片搜索字体的网站——求字网，你一定碰到过这样的情况，看到某个网站使用了很漂亮的字体，想知道是什么字体？除了可以查阅源代码获取，还可以将文字截成图片，放到求字网上去匹配搜索，当然我更建议使用源代码，因为有时求字网数据库不够全会找不到答案。