2021-08-23|已帮助:2219 人
了解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文件。
尊重原创文章,转载请注明出处与链接:https://m.qinxue365.com/jsjzx/Web_Design/627853.html,违者必究!
以上是北京火星人教育整理的网页制作如何增加矢量图标,老司机才知道的技巧全部内容。