CSS3的@font-face

参考资料：https://www.w3cplus.com/content/css3-font-face
@font-face是CSS3中的一个模块，主要是把自定义的Web字体嵌入到网页中。

@font-face的语法规则

// 以iconfont为例
@font-face {font-family: "iconfont";
    src: url('../fonts/iconfont.eot?t=1505286646246'); /* IE9*/
    src: url('../fonts/iconfont.eot?t=1505286646246#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/iconfont.ttf?t=1505286646246') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('../fonts/iconfont.svg?t=1505286646246#iconfont') format('svg'); /* iOS 4.1- */
  }

字体格式

- TureTpe(.ttf)格式
Windows和Mac最常见的字体，是一种RAW格式，不为网站优化。
兼容性：【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】

- OpenType(.otf)格式
被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能。
兼容性：【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】

- Web Open Font Format(.woff)格式
Web字体中的最佳格式，是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离。
兼容性：【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】

- Embedded Open Type(.eot)格式
IE专用字体，可以从TrueType创建此格式字体。
兼容性：【IE4+】

- SVG(.svg)格式
基于SVG字体渲染的一种格式。
兼容性：【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】

字体获取
Google webfonts: http://www.google.com/webfonts
Dafont: https://www.dafont.com/
获取到的字体包为.ttf格式，要使用需要先进行转换。

字体转换
https://www.fontsquirrel.com/tools/webfont-generator