制作字体的两个方法

app对字体显示有特殊要求时,开发会在安装包里放入字体文件。最近就遇到需要加入特殊数字和部分符号的字体,以下:

字体的两种做法,使用Iconfont生成字体和Fontlab Studio制作字体;

1、使用Iconfont生成字体

用到工具:AI、浏览器(偶尔Safari会出现Iconfont无法下载问题,换Chrome或者其他浏览器)


(1)用AI制作自己需要的字体

a.安装字体,找到需要使用的字体包

b.字体转曲,调整字体结构(版权问题、无版权直接转曲不调整)


(2)按照Iconfont规范绘制图表

a.打开http://www.iconfont.cn ,选择 帮助——图表绘制——下载源文件——查看规范

b.把之前做好的字体,按照Iconfont规范调整成单个的SVG,命名他们

命名单个字体

(3)上传自己的图表,加入购物车下载代码

a.注册Iconfont帐号

b.点击导航栏右侧,上传按钮,拖入制作好的svg到框内;

右往左第三个 上传按钮




c.等待上传完成

d.在自己图库中


(4)给开发哥哥,看代码的应用;

开发代码应用:http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.14&helptype=code

Android:

官方文档还是辣么简洁!照这个可能做不出来~\e  改成\ue就能使用啦;另外间距控制Android5.0以上用letterSpacing,兼容的话要自定义View来做间距控制;

iOS:

官方文档更简洁~!能使用~


2、Fontlab Studio 5

现在只用Mac,所以windows系统参考下步骤;

用到工具:AI、Fontlab Studio 5

(1)同上用AI制作自己需要的字体

a.安装自己需要的字体包

b.字体转曲

b.单独1000*1000px的制作,注意字重、字怀、字面、中宫和重心;

d.复制需要个数的背景板,制作字体

(2)打开Fontlab Studio 5,制作字体

a.新建字体库

b.选择要制作的字体,点击进入;选择进入而不是新建是为了让字体的XX一一对应

c.直接复制制作好的AI文件

d.调整字体位置,间距通过线位置调整

e. 制作完成所有需要字体、命名字体包

f. 将制作好的文件,导出.tff格式


配图:两种字体对比;老版本字体;


最后实现的App效果!~ 撒花~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容