2.字体图标

news2024/9/23 11:19:05

2.1字体图标的产生

字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显：
1.图片文件比较大
2.图片本身放大和缩小会失真
3.一旦图片制作完毕想要更换非常复杂

字体图标iconfont可以很好的解决以上问题
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。

2.2字体图标的优点

●轻量级: 一个图标字体要比一系列的图像要小。一旦字体加载了, 图标就会马上渲染出来,减少了服务器请求
●灵活性: 本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
●兼容性: 几乎支持所有的浏览器, 可放心使用
注意:
字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化。
总结:
1.如果遇到一些结构和样式比较简单的小图标,就用字体图标。
2.如果遇到一些结构和样式复杂一点的小图片,就用精灵图。

字体图标是一些网页常见的小图标 ,我们直接网上下载即可。
因此使用步骤可以分为:
1.字体图标的下载
2.字体图标的引入(引入到我们html页面中)
3.字体图标的追加(以后添加新的小图标)

2.3字体图标的下载

推荐下载网站:
●icomoon 字库： http://icomoon.io
IcoMoon成立于2011年,推出了第一个自定义图标字体生成器,允许用户选择所需要的图标,使它们成一字型。该字库内容种类繁多,非常全面,但它是国外服务器,打开网速较慢。
●阿里iconfont字库：http://www.iconfont.cn/
这个是阿里巴巴M2UX的一个iconfont字体图标字库,包含了淘宝图标库和阿里巴巴图标库。可以使用AI制作图标上传生成。重点是,免费!

2.4字体图标的引入

1.把下载包里面的fonts文件夹放入页面根目录下
在这里插入图片描述

2.在CSS样式中全局声明字体:简单理解把这些字体文件通过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标签内添加小图标
在这里插入图片描述
【示例代码】

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 字体声明 */
        @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;
        }
        span {
            font-family: 'icomoon';
            font-size: 50px;
            color: skyblue;
        }
    </style>
</head>

<body>
    <span></span>
</body>

</html>