网页制作如何增加矢量图标,老司机才知道的技巧

了解ttf字体文件本身的现有Unicode代码后,如果阿里巴巴图库中所选图标的Unicode代码与其重复,请点击左下角的修改按钮进行修改,今天小编主要给大家分享网页制作如何增加矢量图标,希望对你们有帮助!

网页制作如何增加矢量图标,老司机才知道的技巧

众所周知,电脑中有两种图像,一种叫做点阵图(位图),另一种叫做矢量图。

点阵图放大图片时,看起来会模糊不清,但矢量图不会。因此,越来越多的人开始使用矢量图作为网页图标。许多人会遇到这样的情况,他们会在网站上下载一个带有矢量图标的字体文件,在后期开发中,图标需要不断更新和增加。如果继续下载ttf字体文件,它会占用大量空间,为了增加图标,会下载几个文件的情况。

首先,我推荐两个有矢量图标库的网站:

阿里巴巴矢量图标库、谷歌浏览器里的矢量图库

1.如何找到需要的图标

首先,进入网页:阿里巴巴矢量图标库;

在搜索框中输入所需的图标名称,如“主页”、“策略”,并确认;

找到你想要的图标,向上移动鼠标,选择左下角的“购物框”;

在右上角的“存储架”中,将出现一个已收藏的图标;

然后搜索“策略”,找到图标并将其放入“存储架”;

单击“登录”选择一种登录方法;

现在将鼠标移动到“存储架”存储,单击“另存为项目”,然后单击“保存”。

2.将图标添加到已有的字体文件

现在找到我们已经有的字体文件“new-iconfont.ttf”,用“fontlab”软件打开该文件;

打开后,可以看到ttf字体文件中的图标,每个图标都有自己的统一代码,因为每个图标的统一代码相当于自己的“身份证”。当需要使用外部文件中的图标时,需要此“身份证”;

双击其中一个图标,可以清楚地看到图标上方的“Unicode”,该图标是“E808”;

了解ttf字体文件本身的现有Unicode代码后,如果阿里巴巴图库中所选图标的Unicode代码与其重复,请点击左下角的修改按钮进行修改;

确认修改后,单击“下载到本地”并解压缩,将出现几个字体文件和css文件;

现在你可以使用Fontlab软件打开里面的ttf文件;

选择要增加的两个图标,然后单击鼠标右键中的“复制”,然后返回到先前字体的文件;

最后选择一个图标,右键单击选择“Append Glyphs”以增加所需的图标;

使用快捷方式Gtrl+Alt+G将其保存为ttf文件。

12 12 分享:

相关课程

发表评论

登录后才能评论,请登录后发表评论...
提交评论

最新文章