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

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:
  • 前两种是数字字符引用(英文:numeric character reference(NCR)),数字取值为目标字符的 Unicode code point;

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


  • 后一种「&#name」是 字符实体参考character entity reference,后接预先定义的 entity 名称,而 entity 声明了自身指代的字符,如 空字符&#NUL



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

  • 数字字符
    numeric character reference(NCR),直译就是数字字符引用。
    一个Numeric Character Reference编码是由一个与号(&)跟着一个井号(#),然后跟着这个字符的Unicode编码值,最后跟着一个分号组成的,就像上面的例子&#dddd

    有了数字字符引用,就可以在网页中显示Unicode字符了,不用考虑html文件本身的编码,因为数字字符引用只用到ASCII字符集里的字符。所以,即使在gb2312编码的网页中,也可以用NCR显示埃及的象形文字了。

  • 实体字符
    在Node 层利用 cheerio 解析网页时,输出的中文内容都是以 &#x 开头的一堆像乱码一样的东西,将这一堆“乱码”保存成网页后,通过浏览器打开又可以正常显示。这些乱码,学名是实体编码“entity code”。

    这些实体字符是预留的,格式比较语义化,容易记忆,浏览器会将它们视作标签。

    比较常见的有:
    | 字符 | 转义序列 | 十六进制|
    | --------- | ---------| ---------|
    | 空格「 」|   | - |
    | 小于号「<」| &lt;| - | | 大于号「&gt;」|>| - | | … || - | | tab (一个空白=2个字符宽度)|&emsp|&#8195` |


自定义一套字体包

应用场景:
在移动端和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安装包

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容