视觉艺术开发工具

关于字体编码的一些知识,并带大家制作一套字体。

2021-10-14  本文已影响0人  LRachel

w3schools 官网文档中介绍的常见符号 点击查看
关于编码的一些知识供大家查阅 点击查看

常见的一些编码知识,只需要了解一下就行,制作字体包时会用到。

0021-007F 、 ASCII Punctuation 点击查看





0030-0039、ASCII Digits Unicode字符 点击查看





00A2-00A5、 日元磅和美分:Yen, Pound and Cent 点击查看





Dingbats字符、印刷符号 (Dingbats)字符





简体中文(GB2312) gb2312 编码相关信息 查看各国语言 点击看简体中文

可以看到想设计一套中文字体大概有23940个编码,体积量很大!






「&#x 」和「 &#」 开头的是什么编码

类似这样的字符&#dddd&#xhhhh&#nameHTM,这些字符是HTMLL、XML 等 SGML 类语言的转义序列(escape sequence)。它们不是「编码」。

以 HTML 为例,这三种转义序列都称作字符参考character reference:

十进制:decimal (dec),取值范围:8192-8303,格式「&#」开头的后接十进制数字,如 &#0048
十六进制:hexadecimal (hex),取值范围: 2000-206F,「&#x」开头的后接十六进制数字,如 &#X030

什么是数字字符和实体字符

自定义一套字体包

应用场景:
在移动端和web端设计时,一些用到数据的地方,用某些特定的字体,比如DIN字体,视觉效果比较好看,但是又不想安装很大的字体包,我们可以把数字0-9和常见的标点符号字提取出来,单独做成字体包,减少APP的体积。当然也可以自己动手设计一套。

优点:体积小,可自定义设计

方法一:利用iconfont图标库制作字体包

iconfont针对字体原理的一篇文章 点击阅读
  1. 在本地设计好一套字体或者图标,这里以数字字体为例,记得所有图层最后合并一下,然后导出svg格式到本地;

  2. 打开iconfont官网 官网地址,在菜单栏找到资源Resources——我的项目(My Projects)——点右上角创建一个项目;
    这里可以定义前缀的样式,比如icon_



  1. 上传本地设计好的svg格式文件,可批量,去除颜色并提交;




  1. 上传完可以在项目里看到,如图,每个数字下方有一串字符,这就是上面讲到的数字字符,我们需要做的就是一个个修改好,


5.鼠标点击单个数字图标,点击编辑,默认是下图这样的



前面unicode是系统自动生成的,我们只需要在字符里输入对应的数字即可,你会发现前面的Unicode自动变成了38。全部修改完返回看到项目中图片自动生成了「&#x」+16进制的格式,这是和编码表一一对应的。类推,汉字的话也是这样操作。




6.到这里已经制作完成,直接下载即可。



方法二:可以用一些在线的自己编辑器直接编辑,之后下载ttf安装包

百度字体编辑器 官网
类似比较多,可以自己尝试一下,主要涉及到基线,字宽,目的是保证直接打出的文字左右间距等整体协调。

上一篇下一篇

猜你喜欢

热点阅读