字体图标
程序员文章站
2022-05-25 19:06:03
...
字体图标
优点
- 可以做出和图片一样的事情
- 本质是文字，所以可以任意去修改颜色 大小 阴影
- 本身体积小 携带的信息没有削减
- 几乎所有浏览器支持，移动设备必备良药
使用场景
公司内部自己设计图标
- UI设计字体图标效果图 （svg）
- 前端人员上传生成兼容性字体文件包 比如
- https://icomoon.io/
- https://www.iconfont.cn/
- 下载字体文本包到本地
- 把字体文件包引入到html页面中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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-weight: normal;
font-style: normal;
}
span {
font-family: "icomoon";
font-size: 200px;
color: red;
}
p::before {
font-family: "icomoon";
font-size: 100px;
content: "\e93e";
}
</style>
</head>
<body>
<span></span>
<span></span>
<p></p>
</body>
</html>
返回目录
上一篇： 5/7 完成新建教师用户 修改部分图标 合并到主分支
下一篇： 字体图标第三篇: 使用单个ttf字体