如何在网页制作中给网页字体文件增加矢量图标 很多新学员不太清楚网页字体文件增加矢量图标,下面这篇文章就为大家带来详细内容,需要的朋友可以一起看看
大家都知道,电脑中的图像类型分为两大类,一类称为点阵图(位图),一类称为矢量图。

点阵图在图片放大的时候会出现模糊现象,矢量图则不会。因此越来越多人开始使用矢量图来作为网页图标。很多人会遇到这样的一种情况,就是自己去网站下载了一个带了一些矢量图图标的字体文件,在后期开发中,图标需要不断的更新和增加,如果继续下载ttf字体文件,则很占空间,会出现为了增加一个图标,下载好几个文件的情况。下面呢,我会为大家讲解如何在原有的字体文件上添加图标。

首先我先推荐两个有矢量图标库的网址

阿里巴巴矢量图标库http://iconfont.cn/

谷歌浏览器里的矢量图库https://icomoon.io/

第一部分,介绍如何找到自己需要的图标

首先,进入网页:阿里巴巴矢量图标库http://iconfont.cn/

在搜索框内输入需要的图标名称,比如说“主页”、“攻略”,确认。

找到自己需要的图标,鼠标移上去,选中左下角的“购物框”

右上角的“储存架”,会出现一个已收藏的图标

再搜索“攻略”,找到图标,放到“储物架”。

点击“登录”,选择一种登录方式

现在将鼠标移到“储物架”储,点击“存储为项目”,点击“存储”

第二部分,是介绍如何将前面的图标添加到已有的字体文件

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

打开后就可以看到ttf字体文件里的图标,每个图标都有自己的Unicode编码,因为每个图标的Unicode相当于自身的“身&份&证”,外部文件需要使用里面的图标时,需要使用这张“身&份&证”。

双击其中一个图标,即可清晰的看到图标上面的“Unicode”,这张图标则是“E808”

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

确认修改后,点击“下载到本地”,解压,会出现几个字体文件,和css文件

现在可以用Fontlab软件,打开里面的ttf文件

选中自己需要添加的两个图标,点击鼠标右键中的“copy”。然后返回之前已有的字体的文件

选中最后的图标用右键选中“AppendGlyphs”,将需要的图标添加进去

到这里就添加完了,使用快捷键Gtrl+Alt+G,保存为ttf文件

以上就是小编为大家带来的如何在网页制作中给网页字体文件增加矢量图标的全部内容,希望对大家有所帮助,更多内容请继续关注爱安网

最新资讯
微信视频号,难产大V

微信视频号,难产大V

这个独特的内容生态怎么能更健硕,微信团队还有很多基本
高榕资本宣布完成超百亿元募资 管理基金整体规模达280亿元

高榕资本宣布完成超百

高榕资本宣布本年度美元与人民币基金募集情况,新募资总
我们终于知道恐龙的屁眼长什么样了!

我们终于知道恐龙的屁

恐龙的屁眼长什么样?这是一个令人好奇的问题,目前古生物
孤独与孤立如何改变您的思维方式

孤独与孤立如何改变您

长期的独处会如何影响我们的大脑呢?我们是否需要社交活
Airbnb拆股方案获批准 股票总价值没有变化

Airbnb拆股方案获批准

据报道,在IPO之前Airbnb有意分拆股票。内部邮件显示,Air
蚂蚁投资者提交报价,上海IPO部分或筹资至多173亿美元

蚂蚁投资者提交报价,上

据报道,熟悉情况的消息人士称,在一些大型投资者提交了每
最新文章
网页简单布局之结构与表现原则分享

网页简单布局之结构与

一般来说html结构 css表现 javascrip行为,网页布局要考
隐藏 Web 中的元素方法及优缺点教程详解

隐藏 Web 中的元素方

这篇文章主要介绍了隐藏 Web 中的元素方法及优缺点教
白话分析自适应跟响应式的区别详解

白话分析自适应跟响应

这篇文章主要介绍了白话分析自适应跟响应式的区别详解
div与div之间有空隙的解决方法

div与div之间有空隙的

今天在制作页面的时候发现两个div之间有空隙导致两个
推荐一款酷炫闪烁的告警按钮

推荐一款酷炫闪烁的告

今天小编给大家推荐一款酷炫闪烁的告警按钮,非常不错,具
移动端开发1px线的理解与解决办法

移动端开发1px线的理

这篇文章主要给大家介绍了关于移动端开发1px线的理解