博学谷 - CSS笔记18 - 字体图标

1.字体图标的优点

• 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
• 兼容性：几乎支持所有的浏览器，请放心使用

2.使用字体图标的步骤

• 字体图标的下载
• 字体图标的引入 （引入到我们html页面中）
• 字体图标的追加 （以后添加新的小图标）

下载地址:

• icomoon 字库: http://icomoon.io
• 阿里 iconfont 字库: http://www.iconfont.cn/

字体文件格式:
不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

• TureType(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
• Web Open Font Format(.woff)格式woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
• Embedded Open Type(.eot)格式.eot字体是IE专用字体，支持这种字体的浏览器有IE4+；
• SVG(.svg)格式.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

下载后的目录文件,导入字体图标的方法请参考:demo_index.html文件

3.测试
demo:

    <link rel="stylesheet" href="./font/iconfont.css">
    <script src="./font/iconfont.js"></script>

    <span class="iconfont icon-003-man"></span>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-003-man"></use>
    </svg>

效果:

4.文章参考链接
a. https://www.boxuegu.com/
b. https://blog.csdn.net/wingchiehpih/article/details/105875227
c. https://blog.csdn.net/hecr_mingong/article/details/107347782