您的位置:首页 >> WEB开发 >> Base64字体图标 — 让图标更加便捷
Base64字体图标 — 让图标更加便捷
[ 孤狼 | 2020-06-17 23:28:06 | WEB开发 | 507°C | 2条评论 ]

随着网站技术的发展,网站图标也跟着进化了。最早网站的图标都是一张张小图片,后来因为请求次数太多,不利于高并发,就诞生了图片地图,把所有图标画到一张图上,这样只需要加载一次。后来出现了高清屏,图片格式无法矢量放大,一放大就马赛克,于是出现了字体图标,用字体的矢量方式来替换图片,还能随意改变颜色。再后来,不满足于单色字体,Iconfont又弄出了彩色字体。但是,字体总归是要单独加载,还是无法简化到最后一步。那么就没有办法了吗?当然有,base64字体就是解决方案。

图标进化路线

1.原始版本,加载多张小图标


2.图片地图版本,只加载一张图


3.字体版本,图标可以矢量控制


4.base64字体版本,不再加载字体文件



实现

1.我们需要借助阿里的一个站点 iconfont [https://www.iconfont.cn],这是一个阿里的字体图标站点,我们可以很轻松的创建一个自己的字体。



2.搜索别人的字体或自己设计上传字体并添加到自己的字体项目中


3.把整理好的字体下载到自己的电脑,并解压出来。


4.打开字体文件夹里的 demo_index.html ,可以看到我们的字体图标已经可以正常显示了。


文件下面有使用方法,如果你只需要矢量字体而不用base64的话,那么你现在就可以使用了。[


5.打开 transfonter 网站 https://transfonter.org 。这是一个可以把字体转为base64编码的站点。



6.点击左边的 Add fonts 按钮,上传我们的 iconfont.woff 字体。



7.在下方设置中,我们打开 Base64 encode 开关,然后取消 WOFF WOFF2 这两个选项。因为我们不需要输出字体了。



8.点击右侧的 Convert 转换按钮,然后点击 Download 下载我们的文件。



9.打开我们下载的文件,我们可以看到只有3个文件。其中只有 stylesheet.css 文件有用。


stylesheet.css 文件里保存着base64转换后的字体数据。我们打开文件就能看到字体转换后的css信息,如果你的站点字体都是这么做那么可以保持一个独立的字体css,如果你想再精简的话,那就复制里面的代码到其他文件里去,比如 html文件 或 javascript文件 。 [


10.我们新建一个 html 文件来测试是否成功。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<link rel="stylesheet" href="stylesheet.css">
<style>
.iconfont{
/*这句很重要*/
font-family: "iconfont" !important;
font-size:60px;
}
</style>
</head>
<body>
<div class="iconfont">& #xe605;这里输入你自己的unicode编码</div>
</body>
</html>


11.输入完上面的代码之后,我们来运行看看。



可以看到我们的字体图标已经可以正常显示了。[

这里需要注意的几点:
1.stylesheet.css文件里定义了字体的font-family可以改成自己定义的。
2.一定需要单独建立一条CSS来引用字体font-family。否则字体无法被引用。为了确保一定生效最好加上!important。
3.引用的块节点内部需要输入上图标的名称,因为他只是字体,所以依然需要对应的名称才能调用。图标名称就在iconfont下载的使用说明里,每个图标下面都有备注和名称。默认使用Unicode码来调用 


好了,今天就说到这里,你Get到了吗?[



转载请注明出处:http://gl.paea.cn/n.php?n=145
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
小旋风• 2020年06月20日 03:03来自:北京市 的朋友
嘿嘿我也来了
大老王• 2020年06月20日 02:08来自:北京市 的朋友
好久没来了来看看你
哈哈,来了老弟
综合 · 搜索