@font-face制作小图标的实践
2024-08-30 12:31:22
1、为啥要用font-face制作小图标
1）适用性：一个图标字体要比一系列的图像要小，一旦字体图标加载完，图标则会立刻显示出来，不需要去下载一个图像。
2）可扩展性：可以使用font-size对图标进行大小设置，这使得能够随时输出不同大小的图标；但如果是图片，则需要为不同大小的图片输出不同的文件。
3）灵活性：可以为图标添加任何文字效果，并且可以在任何背景下展示。
4）兼容性：网页字体支持所有现代浏览器，包括IE低版本。
2、实现步骤
首先，将SVG转换成web字体。使用网站：Icomoon
点击‘Import Icons’按钮导入需要转换为web字体的图标。选中后点击 ‘Generate Font’按钮将web字体下载下来。
FPJ.png)
下载文件中有个demo.html，打开文件，可以看到不同的图标对应的通字符：
其次，调用字体。
声明@font-face:
@font-face{
font-family: 'icomoon';
src:url('fonts/icomoon.eot'); /* IE 专用*/
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* IE*/
url('fonts/icomoon.woff') format('woff'), /* chrome,firefox,IE9+,safari,opera */
url('fonts/icomoon.ttf') format('truetype'), /* IOS4.2+ */
url('fonts/icommon.svg') format('svg'); /* IOS */
font-weight: normal;
font-style: normal;
}
使用字体：
[class ^="icon-"],[class*=' icon-']{
font-family: 'icomoon';
}
.icon-1:before{
content: "\e600";
}
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>font-face 测试页面</title>
<style>
@font-face{
font-family: 'icomoon';
src:url('fonts/icomoon.eot'); /* IE 专用*/
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), /* IE*/
url('fonts/icomoon.woff') format('woff'), /* chrome,firefox,IE9+,safari,opera */
url('fonts/icomoon.ttf') format('truetype'), /* IOS4.2+ */
url('fonts/icommon.svg') format('svg'); /* IOS */
font-weight: normal;
font-style: normal;
}
[class ^="icon-"],[class*=' icon-']{font-family: 'icomoon';}
.icon-1:before{content: "\e600";}
.icon-2:before{content: "\e601";}
.icon-3:before{content: "\e602";}
.wrap ul{list-style: none;}
.wrap ul li{line-height: 28px;font-size: 28px;}
</style>
</head>
<body>
<section class="wrap">
<ul>
<li class="icon-1">第一个li</li>
<li class="icon-2">第二个li</li>
<li class="icon-3">第三个li</li>
</ul>
</section>
</body>
</html>
效果图：
最新文章
- cx_Oracle摘记
- 深入学习jQuery鼠标事件
- SQL Server基础之游标
- Hibernate入门案例及增删改查
- pentaho cde 画图参数介绍
- 2.python算法之回形矩阵
- 阿里云centos试用
- sql注入攻击的预防函数
- ORA-12545:因目标主机或对象不存在，连接失败!
- 解决mysql占用IO过高
- MySQL快速生产表的描述
- 结构体struct和typedef后面接指针的含义
- ueditor从excel粘贴过来的表格不显示问题
- 不要错过 DevOps 之父出席的2017 DevOpsDays 北京站！
- 第二章：2.9 总结一下 Django
- 团队作业4——第一次项目冲刺 tHe LaSt dAy
- localStorage存储数组以及取数组方法
- EasyUI整合篇
- 盒子模型(Box Model)
- Django REST Framework限速