CSS icon-font原理

缘起

知道可以用使用字体的方式使用图标后，想要了解什么原理

思考

1. 怎么做到用“字”来展现图标？ 造字：做出字形如图标的字
2. 怎么才能造字？字体库有两种：一种是矢量图字体，一种是点阵。其实字形即为图形
3. 计算机如何使用字体？以unicode为索引，定位字的"图形"
4. iconfont应该是怎么做的？把图标形成一个个矢量图或点阵图，然后每个图形用一个unicode数值做索引，把需要的icon型的“字”形成一个字库
5. 需要做些什么？
   • 先有个名字
   • 再有字体文件
   • 然后有获得字体文件的办法
6. 怎么使用？使用unicode的索引值引用

实战

1. 定义
   名字：font-family
   字体文件定位：src：
2. 使用
   • html: <i class="testfont>&#xe869;</i>
   • css:

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

• svg：支持多彩字体

适可为止，了解以上信息已经可以满足现在的工作了。