精灵图与字体图标

CSS

发布日期: 2021-11-07

更新日期: 2023-02-07

文章字数: 816

阅读时长: 3 分

1. 精灵图

盒子位置是固定的，移动的是图片，所以一般x,y的值都是负的（向左，向下）。

background: url() no-repeat -x坐标 -y坐标;

坐标数值在切片工具上看。

缺点：

图片文件还是比较大；
图片本身放大和缩小会失真；
一旦图片制作完毕想要更换比较麻烦。

字体图标iconfont可以解决以上问题。

字体图标提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

2. 字体图标

优点：

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

注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化。

使用：可以直接网上下载

字体图标的下载；
字体图标的引入（引入到html页面）；
字体图标的追加（以后添加的新的小图标）。

2.1 推荐下载的网站：(免费)

IcoMoon字体库：http://icomoon.io
- IcoMoon成立于2011年，内容种类多很全面，服务器在国外，可能打开比较慢。
阿里iconfont： http://www.iconfont.cn/
- （感觉这个更好用）
- 是阿里妈妈M2UX的一个字库，包含淘宝图标库和阿里妈妈图标库，可以使用AI制作图标上传生成。

2.2 使用步骤：

把下载包里的fonts文件夹放入页面根目录下。
在CSS样式中全局声明字体。(打开style.css，复制到页面style标签里。)
html标签内部添加小图标。（去网站复制过来，是个很小的方框）
```
// 可以写在span标签里
<body>
    <span>  </span>
</body>
```

只有了span不行，要给span指定字体：(写在第二步的下面)

// 例：
<style>
    span {
        font-family: 'icomoon';   /* 关键 */
        font-size: 100px;         /* 可以自定义其它样式 */
        color: pink;
    }
</style>

2.3 字体文件格式：

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

TureType(.ttf)格式，.ttf字体是Windows和Mac最常用的，支持这种字体的浏览器有IE9+，Firefox3.5+，Chrome4+，Safari3+，Opera10+，iOS mobile。
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+，iOS mobile Safari3.2+。