admin 管理员组

文章数量: 1086019


2024年3月19日发(作者：alter table drop column用法)

再不知道字体图标就落伍啦！字体图标制作详解

上期通过分享《浅谈矢量图形前景》，简单地从设计趋势、技术、以及现有应用环境

等角度讲述了矢量技术应用的可行性。这期我们将把阿里妈妈MUX这两年在矢量图

标制作上积累的经验也分享给大家；

在做手机端WebApp项目中,经常会遇到小图标在手机上显示比较模糊的问题，经过实

践发现了一种比较好的解决方案，图标字体化。在微社区项目中，有很多小的Icon（图

标），如分享、回复、赞、返回、话题、访问、箭头等，这些Icon（图标）一般都是纯

色的。开始制作时考虑用双倍大小的Sprite图，通过CSS样式设置只显示二分之一尺寸，

这样在Retina屏上显示的大小是正常的，一旦放大屏幕后图标又变得模糊不清，测试的

效果不是很理想，后来又考虑多套图标适配方案、SVG矢量图等，都因为种种原因放弃

掉了（如多套图标繁琐、Android2.3不支持SVG格式等），为了解决以上问题，用到了

图标字体，下图为微社区用到的部分图标字体。

大家可能在网上看过很多关于矢量图标制作的教程，而且大多是技术同学分享的技

术贴。整个过程也相对比较简单。在这里我们将深入地向大家讲述字体图标制作的

规范流程和注意事项，很多内容是现在网上没有的，纯粹是阿里妈妈MUX这两年摸

索出来的。阿里妈妈MUX在国内首家推出了在线生成字体图标平台，省去了设计师

不太擅长的字体制作过程，所以在本教程中我们就不再详细介绍如何使用字体制作

工具制作字体图标的过程，更多的是介绍如何在AI工具中制作一个规范的字体图标。

一、制作前基础知识普及

1、在制作图标前请下载由阿里妈妈MUX提供的矢量图标制作模板；立即下载

2、尽量使用illustrator制作矢量图标；有些设计师在ps中使用路径绘制图标再导

成SVG，这种方式也是可以的，但是有时会出现一些奇怪的现象，如图形的路径混

乱了，图标倾斜了等不可预知的情况，所以还是建议大家在illustrator中绘制矢量

图标；

3、将illustrator中绘制的图形另存为SVG格式；最初iconfont平台是支持EPS

文件上传的，但是考虑到EPS文件在平台生成过程的不稳定性，所以现在统一采用

SVG格式；illustrator中SVG格式导出具体教程>>iconfont

4、在绘制图标的过程中不要使用AI图形模块的旋转、镜像等功能，整个绘制过程

最好使用钢笔工具绘制；^^

5、避免出现图形绘制过中断点的现象。

6、不可以用色彩叠加的方式来达到模块造型；

二、图标栅格

数字形态下，字符是用抽象化的图案绘制成的。当文本显示在屏幕上时，位置非常


本文标签： 图标 制作 字体 矢量 绘制

版权声明：本文标题：再不知道字体图标就落伍啦!字体图标制作详解 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1710795931a573540.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。