CSS3 @font-face属性

font-face是css3中允许使用自定义字体的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。到了今天这个时代自定义字体会越来越常用，因为前端自动化可以压缩中文未使用到的字体，从而减小中文字体文件体积，让更多的字体运用到web上。

字蛛

字蛛支持grunt和gulp自动化构建工具，官方地址：字蛛

属性介绍

言归正传，先看下font-face的基本用法。

  @font-face {
      font-family: <YourDefineFontName>;
      src: <url> [<format>],[<source> [<format>]], *;
      [font-weight: <weight>];
      [font-style: <style>];
    }

带中括号的属性为非必须选项。

font-family：为载入的字体取名字。

src：[url]加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址。[format]定义的字体的格式，用来帮助浏览器识别。主要取值为：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。

font-weight：定义加粗样式。

font-style：定义字体样式。

format对应字体格式以及常见兼容性写法：

@font-face {
  font-family: 'defineName';
  src: url('../fonts/singlemalta-webfont.eot');
  src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/singlemalta-webfont.woff') format('woff'),
       url('../fonts/singlemalta-webfont.ttf') format('truetype'),
       url('../fonts/singlemalta-webfont.svg#defineName') format('svg');
  font-weight: normal;
  font-style: normal;
}

#iefix有何作用？
IE9 之前的版本没有按照标准解析字体声明，当 src 属性包含多个 url 时，它无法正确的解析而返回 404 错误，而其他浏览器会自动采用自己适用的 url。因此把仅 IE9 之前支持的 EOT 格式放在第一位，然后在 url 后加上 ?，这样 IE9 之前的版本会把问号之后的内容当作 url 的参数。至于 #iefix 的作用，一是起到了注释的作用，二是可以将 url 参数变为锚点，减少发送给服务器的字符。
为何有两个src？
绝大多数情况下，第一个 src 是可以去掉的，除非需要支持 IE9 下的兼容模式。在 IE9 中可以使用 IE7 和 IE8 的模式渲染页面，微软修改了在兼容模式下的 CSS 解析器，导致使用 ? 的方案失效。由于 CSS 解释器是从下往上解析的，所以在上面添加一个不带问号的 src 属性便可以解决此问题。

引用来自梦幻雪冰博客。

把字体加载进来以后就可以使用了，使用方式很简单,font-family引入即可生效。

body {
    font-family: defineName;
}

兼容性

IE6-8仅支持 embedded-opentype（.eot）。

firefox3.5支持truetype（.ttf）、opentype（.otf）。

firefox3.6支持truetype（.ttf）和opentype（.otf）、WOFF（.woff）。

chrome支持truetype（.ttf）、opentype（.otf）、WOFF（.woff）、svg（.svg）。

safari支持truetype（.ttf）、opentype（.otf）、WOFF（.woff）、svg（.svg）。

opera支持truetype（.ttf）、opentype（.otf）、WOFF（.woff）、svg（.svg）。

格式介绍

目前最主要的几种网络字体(web font)格式包括WOFF，SVG，EOT，OTF/TTF。

WOFF

WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上，由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些，因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势，因为所有的现代浏览器都开始支持这种字体格式。

SVG / SVGZ

Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。

EOT

Embedded Open Type。这是微软创造的字体格式。这种格式只在IE6-IE8里使用。

OTF / TTF

OpenType Font 和 TrueType Font。部分的因为这种格式容易被复制(非法的)，这才催生了WOFF字体格式。然而，OpenType有很多独特的地方，受到很多设计者的喜爱。