那么你想制作CSS3字体吗？

余果 2012-07-17 front-end

最近使用CSS3字体的项目发布了，在组里分享了一下相关流程。

如果没有读过之前我的@font-face实战，请移步：http://yuguo.us/weblog/font-face-in-action/ 为了讲清楚流程，我用PS很不职业地画了一个流程图。

所以问题是当我们制作一个全新字体库的时候，里面的图形都要我们从矢量设计稿中扒出来，这是一个相对比较人工的操作，而且是团队协作的时候比较容易起冲突的操作。

此外还有一个有意思的问题：如果我们做spirit image，图中可以合并的小图片书目理论上是无限的；那么我们在一个字体中包含的图标可以是多少种呢？

首先我们要了解编码和字形之间是没有必然联系的：

在文字处理方面，统一码为每一个字符而非字形定义唯一的代码（即一个整数）。换句话说，统一码以一种抽象的方式（即数字）来处理字符，并将视觉上的演绎工作（例如字体大小、外观形状、字体形态、文体等）留给其他软件来处理，例如网页浏览器或是文字处理器。

也就是说我完全可以做一个字体，对应字母A的编码的那个字形弄个B的样子，对应B的就弄个X，虽然很蛋疼，但是在机器看来是很正常的。（话说是有这样的密码的，正常人眼看上去就是乱码，只能根据字典来破解。不过现在计算机可以根据字频统计来反向破解出来。扯远了……）

那么我们有多少编码可以用？

目前，几乎所有电脑系统都支持基本拉丁字母，并各自支持不同的其他编码方式。Unicode为了和它们相互兼容，其首256字符保留给ISO 8859-1所定义的字符，使既有的西欧语系文字的转换不需特别考量；并且把大量相同的字符重复编到不同的字符码中去，使得旧有纷杂的编码方式得以和Unicode编码间互相直接转换，而不会遗失任何资讯。举例来说，全角格式区段包含了主要的拉丁字母的全角格式，在中文、日文、以及韩文字形当中，这些字符以全角的方式来呈现，而不以常见的半角形式显示，这对竖排文字和等宽排列文字有重要作用。

简单的答案是：256个。

复杂的答案是：这要看你的字体是希望采用什么编码？你的网站面向多少种语言的用户？只有基本拉丁字符是所有计算机都支持的，其他字符比如中文系统和韩文系统是各自的系统才有的。如果做一个韩文编码的字体的话，那可以放上万种图标进去，但是在中文计算机上就会乱码。

所以如果256个是够用的，那就默认用编码的前256位即可。

为什么是256呢？二位的16进制能表示的字符数（从00到FF）是256个。

以字母A（大写）为例，它是第65个字符，对应的16进制编码是41（4*16+1=65），对应的拉丁字符是A。所以我们在网页上想输出A的时候，在源码中可以有以下几种选择：

• 可以用键盘直接（Shift+a）
• 可以用十进制编码A
• 可以用十六进制A

大概就是这样了，拥有了这些知识你就可以把基本拉丁字符的256个坑都设置对应的图标，然后使用以上的输入方法来输出到html中去。

如果你是个变态，希望使用更多的字符，那么可以考虑使用中文的unicode range。然后看看这个。

我写字的地方迁移到公众号啦~欢迎关注我的公众号：余果专栏