CSS3自定义字体图标

使用字体图标可以在网页加载的时候被快速渲染出来，减少了图片的请求次数，减少网络负担。

字体图标的优缺点
优点

• 轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

• 灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

• 兼容性：网页字体支持所有现代浏览器，包括IE低版本。

缺点

• 图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。

• 使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。

• 创作自已的字体图标很费时间，重构人员后期维护的成本偏高

制作字体图标的步骤

1. 要有一套 svg 矢量图，没有的同学可以去找马爸爸要
2. 将矢量图与字符进行绑定
3. 使用工具或站点生成一套字体 https://icomoon.io/app/#/select

具体过程

1. 去找马爸爸下载一些矢量图
   随便找一套，点进去下载一些就可以啦
   2021-02-27_130532.png
   一定要选择SVG 下载
   2021-02-27_130612.png
   下载好了图标就可以去转换成字体https://icomoon.io/app/#/select

2021-02-27_130841.png

然后选中图标点击生成字体

2021-02-27_131027.png
然后点击下载 2021-02-27_131552.png
解压后的目录结构
2021-02-27_131752.png

需要的文件就两个 style.css 以及fonts 文件夹，其他的可以删除啦~~

把这两个文件导入到项目中

2021-02-27_132600.png

css写法

/* 设置字体 */
@font-face {
  font-family: 'icomoon';//起名
  src: url('../fonts/icomoon.eot') format('embedded-opentype'),//路径
   url('../fonts/icomoon.svg') format('svg'),
   url('../fonts/icomoon.ttf') format('truetype'), 
   url('../fonts/icomoon.woff') format('woff');
}
[class^="icon-"],
[class*="icon-"]{
    font-family: icomoon;
    font-style: normal;
}

使用字体图标 2021-02-27_133015.png

.icon-phone::before{
   content: "\e902";
}

直接指定一个 class 属性即可!

<a class="icon-phone"></a>

这样一个自己图标就大功告成了！