目录
字体图标
阿里矢量图标库
字体图标的产生
字体图标的使用场景:主要用于显示网页中通用、常用的一些小图标
精灵图虽然有诸多优点,但是缺点也很明显
- 图片文件比较大
- 图片本身放大和缩小会失真
- 一旦图片制作完毕想要更换非常复杂
此时,有一种技术的出现很好地解决了以上的问题,字体图标 iconfont
字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质上属于字体
字体图标的优点
- 轻量级:一个图标要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求
- 灵活性:本质其实是文字,可以随意改变颜色、产生阴影、透明效果、旋转等
- 兼容性:几乎支持所有的浏览器,可以放心使用
- 在使用第一个字体图标时,就已经将下载好的所有字体图标都接收到了,一次请求,一次接收
注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化
总结:
- 如果遇到一些结构和样式比较简单的小图标,使用字体图标
- 如果遇到一些结构和样式复杂一点的小图片,使用精灵图
字体图标的使用
字体图标是一些网页常见的小图标,可以直接从网上下载。因此使用可以分为:
- 字体图标的下载
- 字体图标的引入(引入到 HTML 页面中)
- 字体图标的追加(以后添加新的小图标)
字体图标的下载
推荐下载网站:
- icomoon 字库 http://icomoon.io 强烈推荐
- 成立于2011年,该字库内容种类繁多,非常全面,外国服务器,打开网速较慢
- 阿里 iconfont 字库 http://www.iconfont.cn/ 强烈推荐
- 包含了淘宝图标和阿里巴巴图标库。可以使用 AI 制作图标上传生成。免费
- http://icomoon.io
- 选择想要添加的字体图标
- 添加更多样式的字体图标
- 添加完毕,字体图标选择完毕之后
- 下载
字体图标的引入
下载完毕之后,需要将字体图标引入
1. 将下载的压缩包解压之后的 font 文件夹放入页面根目录下
不同浏览器所支持的字体格式不同,字体图标为了兼容,包含了主流浏览器支持的字体文件
2. 在 CSS 样式中全局声明字体:简单理解把这些字体文件通过 CSS 引入到 html 页面中。一定要注意文件路径的问题
- 选择解压之后的原始文件夹,选择style.css,打开并复制 @font-face 样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<span></span>
<span></span>
<span></span>
</body>
</html>
/*引入语法*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?wpgfem');
src: url('fonts/icomoon.eot?wpgfem#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?wpgfem') format('truetype'),
url('fonts/icomoon.woff?wpgfem') format('woff'),
url('fonts/icomoon.svg?wpgfem#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
font-size: 50px;
color: #00a4ff;
}
效果图
字体图标的追加
如果在开发过程中,原先的字体图标不够使用了,我们需要添加新的字体图标到原先的字体文件中
此时我们应该将压缩包中的 selection.json 重新上传,然后选中自己想要的新图标,重新下载压缩包,并替换原先的文件即可
追加过程:
- http://icomoon.io
- 选择解压后的原始文件夹中的 selection.json
- 下载完成之后,解压下载好的文件,并替换原来的文件夹