关于前端:字体图标

字体图标次要利用于网站中通用、罕用的一些小图标，它展现的是图标，但实质属于字体。

长处：

1. 轻量级： 一个图标字体要比一系列的图像小，一旦字体加载了，图标就会立马渲染进去，缩小服务端申请
2. 灵活性： 字体图标的实质上还是文字，能够很随便的扭转色彩、产生暗影、通明成果、旋转等。
3. 兼容性 ：简直反对所有的浏览器

举荐下载的网站：

• icomoon 字库
• 阿里 iconfont 字库

1、字体图标的引入形式

1、下载结束后，把下载包里的 fonts 文件夹放入页面根目录下【下载包留神要保留，追加图标的时候会用到】
2、在 CSS 款式中全局申明字体，这样能够把字体引入到页面中（留神字体文件门路）

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

3、复制网站上的图标到 html 标签内

2、字体图标的追加

如果须要增加新的字体图标到原有字体文件中，咱们能够把原来压缩包中的 selection.json 文件在网站上传，而后选中本人想要增加的图标，从新下载压缩包并替换原来的文件即可。

3、为什么压缩包中有那么多种字体文件？

不同浏览器所反对的字体格局是不一样的，字体图标之所以兼容，就是因为蕴含了支流浏览器反对的字体文件。

1、TureType(.ttf) 格局：ttf 字体是 Windows 和 Mac 的最常见的字体，反对这种字体的浏览器有 IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile Safari4.2+;

2、Web Open Font Format(.woff) 格局：woff 字体，反对这种字体的浏览器有 1E9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;

3、EmbeddedOpenType(.eot) 格局：eot 字体是 IE 专用字体，反对这种字体的浏览器有 IE4+;

4.SVG(.svg) 格局：svg 字体是基于 SVG 字体渲染的一种格局，反对这种字体的浏览器有 Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;