前端笔记之 icon font

icon font

图标字体就是将图标生成一个字体，使用时和普通字体的无异，可以设置字号大小，颜色和透明度等等，最大的优点是拥有字体的矢量无失真的特点和生成的文件特别小。

1.字体文件的来源

一般是公司的ui去制作字体，我们日常开发使用可以去阿里巴巴矢量图标库下载使用。
首先，先将看中的图标加入购物车然后去购物车下载源码文件。

下载之后再将文件解压到项目中。

2.字体使用

打开iconfont.css就可以看到以下的代码

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('iconfont.ttf?t=1685328430486') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-12:before {
  content: "\e618";
}

将此文件引入项目，或者代码复制出来集中管理所有的字体文件。
然后打开下载的文件中的网页，里面有这个字体的使用的unicode码和具体使用方法。

一共有三种引用方式

具体详细使用都在这个下载的demo网页中。

有两个问题需要注意：1.webkit核心下，边缘会加粗一个像素；2.使用过程中存在缓存，要是更换字体后无法及时显示清空缓存或者做版本参数。