网站常识Common Sense

当前位置:首页 > 网站常识 > 网页制作如何把图标处理成字体使用
常见问题frequently questions 网站常识Common Sense 推广知识Popularizing knowledge 空间知识Spatial knowledge 备案问题Filing problems

网页制作如何把图标处理成字体使用

作者:鹏飞网络   时间:2021-07-21

在网页设计制作中,会经常用到一些小图标来装饰美化一些局部位置。但这些小图标有时候需要鼠标放上去有颜色变化或者其它效果,而且经常会需要背景色和图标颜色一起变动。这样的话用图标会非常不方便。因为,如果使用图标只有两种解决方案。一是用css样式来把彩色图片换成黑白的,当鼠标移动上去再变回原样,这样做法兼容性不高,而且经常跟自己想要的颜色不一定完全一致。第二种就是使用两个不同的图片,两种不同颜色的,需要显示哪个用js来更换。但是,这两种无论哪种,都不太好控制。做网站的都知道,字体图标使用时非常方便,直接引用一个样式,就可以显示一个图标,而且可以像设置普通文字那样设置大小和颜色。今天,我们就为大家介绍一下,网页制作如何把图标处理成字体使用。让你在使用图标时可以更加方便控制。

图标处理成字体使用制作流程:


第一步:把一些图片或图案用photoshop抠图,处理成png图片(当然,如果你会在Illustrator抠图,可以省略这一步)。存档时分辨率存大一点,一般超出512*512的png图片才可以在 ai软件中正常不显示背景色。

第二步:打开AI软件,然后点文件打开这个PNG文件,可以拖动出画布外,看下这个png是不是没有背景色。把图片调整合适的大小。

第三步:选中这个图片,点击软件中的图像描摹,如果点击后不显示右边的小窗口,可以在工具条上的窗口下,找到图像描摹把前面打上对号。在右边小窗口中选择预设下边的 “高保真度照片”(如下图)





第四步:选择工具栏中的扩展,点击下后下图




第五步:如上图点击完扩展的效果,就算是png图片,那个图片的周边也会有蓝色描边,这样的话如果直接存成svg(生成的图标按蓝色描边选择的区域生成),那在生成ttf时会是一个黑色块。所以要把白色没用的部分去掉,分两种方式,一种是用橡皮擦一点点擦除。但这样一是麻烦,二是经常有角落里擦除不到。所以用第二种方式。就是直接双击或点击中间想要的区域,然后按 ctrl+x剪切到剪切板。再把剩余的部分选中删除。然后再按ctrl+v粘贴过来。这样就是自己想要的部分了。

第六步:存储为.svg文件

第七步:打开 iconfont.cn网站并登录(我是用自己的微博帐号登录的),
1、点击右上角 云彩(云朵) 小图标上传
2、中间上选择文件功能,选择自己的.svg文件
3、选择下边保留颜色并生成
4、鼠标移动到生成后的小图标上会有四个选项,点击加入购物车选项
5、点击右上角的购物车图标,选拔下边的下载代码。
6、代码中有样式文件、字体文件和.html示例代码。

第八步:把字体文件直接放到自己的程序中使用即可。

北京网页设计制作鹏飞网络,专业定制开发网站,先做后付款,让您的网站更满意更优秀。有任何需要欢迎来电咨询。