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

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

w3schools 官网文档中介绍的常见符号  点击查看


关于编码的一些知识供大家查阅 点击查看


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



0021-007F 、 ASCII Punctuation  点击查看


image.png





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


image.png





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


image.png





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


image.png





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


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



image.png





「&#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

    image.png


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



  • 数字字符


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的体积。当然也可以自己动手设计一套。


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




相关文章
|
2月前
|
存储 数据处理 C++
超级好用的C++实用库之点阵字体
超级好用的C++实用库之点阵字体
66 0
|
Java
关于TrueType字体的gasp技术说明
关于TrueType字体的gasp技术说明
110 0
|
iOS开发
iOS开发 - 同一段文字显示不同颜色和字体
iOS开发 - 同一段文字显示不同颜色和字体
107 0
使用位图字体工具BMFont从图片生成自定义字体
上一篇转了别人的一篇文章,讲了BMFont的基本用法。对BMFont比较陌生的同学请点击这里先去学习:http://blog.csdn.net/keshuiyun/article/details/9960589。
1541 0
html+css实战52-文字-字体
html+css实战52-文字-字体
124 0
html+css实战52-文字-字体
html+css实战51-字体和文本样式
html+css实战51-字体和文本样式
105 0
html+css实战51-字体和文本样式