字体图标
使用文字做出小图标的效果并超越了小图标应用精灵图, 使得图标变得灵活, 减少了请求次数, 优化了界面的性能. 字体图标本身为矢量图.
字体图标的使用过程
1.UI 设计字体图标效果图
使用 illustrator 或者 Sketch 矢量图软件创建 icon 图标, 并保存 svg 格式.
2. 前端上传生成兼容性字体文件包
将 svg 格式文件转换成页面能够使用的字体文件, 并且需要兼容各种浏览器.
icomoon 字库: https://icomoon.io/
阿里妈妈字库: https://www.iconfont.cn/
3. 前端下载兼容字体文件包至本地
icomoon 字库简单使用教程
1. 打开 icomoon 字库页面以后, 点击 IconMoon App
2. 点击 IcoMoon App 以后, 选择自己想要的图标, 可以多项选择.
3. 选择好图标以后, 找到页面右下角处的 Generate Font 生成字体
4. 点击 Generate Font 以后, 页面跳转后, 右下角处变为 Dowmload
5. 点击 Download 下载, 下载完成以后, 找到下载后的文件夹.
4. 字体文件包引入 HTML 页面
1. 解压下载好的文件夹.
2. 打开 icomoon 文件夹, 找到 fonts 文件夹
3. 复制 fonts 文件夹到自己的项目文件中
4. 页面中声明并调用字体图标
- @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-style: normal;
- }
- span {
- font-family: "icomoon";
- }
- View Code
5. 找到解压后文件夹 icomoon 中的 demo.HTML
6. 浏览器打开, 复制所用字体图标后的小方块
7. 将复制的小方块粘贴在页面所需位置
8. 保存, 浏览器打开页面
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 字体图标 - 测试
- </title>
- <style type="text/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-style: normal; /* 倾斜字体正常 */ } span { font-family: "icomoon";
- /* 与声明中 font-family 相同 */ font-size: 100px; /* 设置字体图标大小 */ color: red;
- font-style: normal; }
- </style>
- </head>
- <body>
- <span>
- ?
- </span>
- </body>
- </HTML>
View Code
来源: http://www.bubuko.com/infodetail-2995503.html