Web 前端眼里文字

啃先生 | 文

Web 开发所运用的 HTML、CSS 以及 JavaScript，都是非常高级的编程语言，低层的细节是透明的。所以相对于其他方面的程序员，前端开发可能会比较少关注底层的知识，字体是其中之一。字体是什么？当我们在 CSS 里敲下 font-family 的时候，那些字体是怎样被渲染出来的？

计算机的世界只有 0 和 1

既然计算机的世界里只有 0 和 1，那么字体是什么？奥妙在两个字：「编码」。0 和 1 就像是两种原子，它们根据一些规则，以不同的排列组合构成世界万物，例如 010 代表 A，而 011 代码 B。

字体就是由 0 和 1 组合而成。转换成计算机界内的语言

• 一个 0 或 1 称为一个 Bit「比特」

• 排列组合称为编码

• 排列的规则称之为编码方式

• 字体有很多，它是世界万物中的一个集合，那么字体集合即是字符集

• 0 和 1 的表示方式称为二进制

一个字体怎么被展示出来

字体以二进制方式存储和传输。在渲染字体的时候，先通过二进制和编码方式，在字符集里查到这个二进制对应的字符，然后把这个字符显示出来。至于怎么显示这个字符，那就是计算机图形学的内容了，字符最终是个图像，显示一个字符就是显示一个图像。

http://mmbiz.qpic.cn/mmbiz_pn...

ASCII 编码中 0100 0001 代表 A

ASCII 编码

从学习计算机开始，我们就听说 ASCII 和 Unicode 编码，它们的起源和发展是怎样的？

古罗马文明给人类留下了丰富的文化遗产，随着欧洲殖民主义的推广和影响 ，这些文明占据了世界文化的主流之一，其中一个就是拉丁字母。 计算机最早期是在西方国家发展和运用的，他们使用 ASCII 编码对拉丁字母和标点符号进行编码，此时字符集很小，试想 a-z，A-Z，0-9，以及其他的字符集，使用一个字节进行编码足够用了。

GB 2312 和 GBK

ASCII 编码使用一个字节，即 8 个比特进行编码，例如 0100 0001 编码为 A。所以，ASCII 最多可以编码 2^8 -1 = 127 个字符。但是汉字就有成千上万个，显然不够用，于是国家标准总局发布了 BG 2312 国家标准简体中文字符集，这个字符集覆盖了超过 99% 的中文。然而繁体字和一些罕见字还是不支持，而后才有了 GBK，它是 GB 2312 的扩展。

Unicode 及其实现方式

随着计算机的发展，世界各国都制定适用于自己国家文字的国家标准。类似于 GB 2312 的国家标准，各国各自为战。而 Unicode 则是世界性的业界标准，它收录世界大部分文字系统。
一个字符的Unicode编码是确定的唯一的，但是 Unicode 的实现则有 UTF-8，UTF-16，UTF-32 等等。UTF-8 的编码长度可变，是一种优化方案，所以目前用 UTF-8 比较多。

网页使用的文字有什么不一样

渲染文字时，从二进制找到字符，当计算机要渲染这个字符的时候，得先知道这个字符所代表的图像，这种映射关系在字体文件里。计算机显示的字体都在系统文件里，就是那些 ttf 文件。网页用的字体有什么特别之处呢？

早期的浏览器，只能使用系统字体，然而 CSS3 提供了 @font-face API，开发者从此可以自定义网站字体。关于 @font-face 就不展开说了。

---

最后，给个 Tips：Unicode 编码系统，除了收录文字，还收录标点符号，和一些特殊符号，比如表情符。

http://mmbiz.qpic.cn/mmbiz/ct...