深入理解@font-face

@font-face规则在CSS3规范中属于字体模块，该规则的推出对于网页设计来说是一个革命性的进步。在传统设计中，设计师不敢使用各种艺术字体类型，甚至是常规字体也需要慎重使用。因为设计师必须考虑每位浏览者的系统中是否安装了所有字体。有了@font-face规则，这个顾虑就可以放下了：只要在互联网上指定一种字体类型源，而不管用户电脑是否安装该字体，设计的网页都能够正确显示。

语法规则

@font-face {
  font-family: '字体名称';
  src: 字体链接;
  font-variant: 字体变型，默认normal;
  font-stretch: 字体拉伸，默认normal;
  font-weight: 字体粗细，默认normal;
  font-style: 字体样式，默认normal;
  unicode-range: 字体Unicode字符范围，默认U+0-10FFFF;
}

image.png

最大支持

这个写法就是当前能支持浏览器最多的了，同时应该保证把@font-face写在所有css的最顶端。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'),  /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Chrome：4.0+
Safari：3.1+
Firefox：3.5+
Opera：10.0+
IE：4.0+
Android：yes
iOS：yes

适合大多数情况的支持

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

这里只添加了woff和woff2，但已经可以支持大多数浏览器版本，详情如下：
Chrome：5+
Safari：5.1+
Firefox：3.6+
Opera：11.50+
IE：9+
Android：4.4+
iOS：5.1+

更加保守的支持

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

添加了.ttf字体，这样基本已经可以涵盖绝大多数浏览器了，详情如下：
Chrome：3.5+
Safari：3+
Firefox：3.5+
Opera：10.1+
IE：9+
Android：2.2+
iOS：4.3+

以base64编码方式引入字体

ps：可以搜索文件与base64字符串转换工具

@font-face{
src: url(data:application/font-woff;charset=utf-8;base64, ... ) format('woff')
}