CSS | iconfont与@font-face

若文章有任何纰漏或未涉及你想了解的内容，欢迎在评论提出，我会尽最快速度回复。

问题场景

  在实际开发中，我们或多或少会使用到类似iconfont/webfont的小图标。它们提供的图标并不是图片，而是字体。这背后的原理以及使用目的是什么呢？

原理与目的

iconfont等基于字体的小图标的实现原理是基于CSS3的@font-face。使用@font-face的好处有字体比图片体积小，可以通过CSS进行样式修改等。
接下来，我们将详细介绍@font-face。

@font-face

@font-face简介

 在CCS3的@font-face出现之前，WEB设计受限于用户端默认字体库的限制，@font-face的出现，极大的丰富了字体的选择。

W3school对@font-face的描述

 iconfont正是利用@font-face规则设计的图标，这区别于早些年，直接使用图片，或是改良的CSS sprite方式。字体文件更小，且可以像操纵文字一样，修改图标的大小颜色等属性。

使用注意

1. 为什么iconfont除SVG格式外，会引入三种字体格式呢？
   这是由浏览器/用户端标准不统一导致的。
   其中，woff的兼容性最好，eot为IE专有。

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

2. font-face不能定义在某一CSS选择器内，否则无效。错误示例如下：

.xxx{
	@font-face{
		//...
	}
}

3. font-face的调用受跨域限制（即字体文件必须与调用它的页面处于同一域内）

其它注意事项可参考MDN

SVG

 iconfont除了可以用unicode/font-class形式引用外，还提供symbol形式引用，它实际上是svg格式的文本图标。

SVG特点

1. SVG 即可伸缩矢量图形 (Scalable Vector Graphics)，使用XML格式定义图像。
2. SVG的最大优势就蕴含在它的名字里。经过伸缩，SVG图形并不会失真。
3. 传统web-font虽相较位图已更加清晰，但因为被浏览器识别为字体，会被抗锯齿柔柔化，边缘会比较模糊，而svg并不存在这样的问题。
4. 同时，SVG还支持多色图标，而传统icon font仅支持单色图标。
   SVG的劣势在于向下兼容性较弱，仅支持IE9+浏览器。

SVG与传统icon-font之间的详细区别
https://www.jianshu.com/p/fb3ce4b9c765