@font-face那些事

XP时，中文网页默认宋体；IE7/8时，改成了微软雅黑；到现代浏览器，CSS3提供了@font-face让我们终于摆脱了使用固有字体的痛苦！

一、@font-face不足及解决方式

缺点：兼容性不够好，中文字体文件过大(影响性能)，版权问题，只有woff格式字体支持跨浏览器。

解决方法：书写专门的兼容代码，用到的字可以选择抽出（gulp有插件gulp-font-spider处理），使用现代浏览器解决不统一问题。

二、使用方法（2步）

① 字体引入及取名

@font-face{

   font-family:'MyFont';

   src:url('abfont.eot');  /* IE9 */

   src:url('afont.eot?#iefix') format('embedded-opentype'),   /* IE6-IE8 */

   url('afont.woff') format('woff'),   /* 现代浏览器 */

  url('abfont.ttf') format('truetype'),  /* Safari, Android, iOS */

  url('afont.svg#svgFontName') format('svg');  /* 老版 iOS，其实svg最新版的5大浏览器也是支持的 */

}

如果你使用的是现代浏览器IE9+及其他四大主流新版浏览器，你可以简化为：

@font-face{

    font-family:'MyFont';

    src:url('afont.woff') format('woff'),  /* 现代浏览器 */

}

②使用①的字体

body{

    font-family:'MyFont';

    font-size: 18px;

}

三、字体及兼容性介绍

浏览器兼容性

①TTF---TrueType（.ttf）

Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

②OTF---OpenType (.otf)

OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体，致力于替代TrueType字体。

②WOFF---WebOpen Font Format (.woff)

Web Open Font Format的缩写，加载速度比其他字体快(使用OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法)，现代浏览器都支持。

③SVG---Scalable Vector Graphics（svg/svgz）

SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

w3c对其有细致的讲解：SVG

④EOT--- Embedded Open Type (.eot)

微软老字体，其他浏览器不支持，IE4+。

SVG是很值得研究的，这里就不做阐述了，自己最近也在研究svg动画。如果该文对你有用，不要吝啬你的爱心“❤”哦！