设计图评审会那天傍晚的晚霞很美。
我之所以记这么清楚是因为当时一抹霞光正好从窗户钻进来打在我的脸上，后来设计师小北说：你当时“满面红光”，也不知道是不是因为生气。
我也不记得自己是不是生气了，只记得那天下午看小北设计图的第一眼我就提出反对意见，然后我们就争执起来，陷入了僵局。她的设计图是这样的：
美食卡片设计图
我说，这里的文字是动态的，你不能用特殊字体，只能用系统默认的那些字体。她说什么动态不动态，难不成这里的字还会跑起来？再说那些个默认字体哪有我这个翩翩体典雅轻盈。我说小北，跟你说话真费劲，今天中午你请我吃个卤煮我把这事儿给你讲明白。
公司附近的北新桥卤煮老店是我比较喜欢去的一个馆子。我和小北过去挑了个角落的位置坐下，我要了一份大肠卤煮加一瓶北冰洋，小北嘟囔着说真是比五十块钱做一个logo的客户还狠。
我跟小北说，其实在这里也可以用你这个什么翩翩体，你想用什么字体都可以。那你为啥还和我吵？还不让我用？小北有点生气地问道。
我夹起一块大肠，嚼烂后就着一口北冰洋咽下，说：你要知道啊，咱们中国上下五千年文明历朝历代累积下来的汉字几万个，常用字也得几千，不像英文字体就那么26个字母，所以一套中文字体少说都得有个几兆大小，有些甚至几十兆。
中英文字体大小比较
如果网页上用你这个字体，就需要用户加载这一整套字体。你知道一般打开一个网页也就几百KB，却要加载几十兆的字体文件，那得等多长时间啊。如果用户在移动网络下浏览咱们网站，随便点几下这个月流量就耗光了，这对用户来说简直是灾难。
小北说我只需要加载这几个字啊？干嘛要加载一整套字体？其他的字我又不用。我说小北啊这些内容是动态的啊！小北说我没做动效啊，不用让这些字动起来啊。
我放慢了速度对小北说，小北啊，我说的动态不是让它动起来啊，你看啊，这里的文字是美食卡片的标题对吧？这个美食卡片都是用户发布的，每个用户发的都不一样，你不能预测它的内容，所以它是动态的内容。为了保证任意内容都能显示正确的字体，我们就得把一整套字体加载进来。
不过呢，你说的只提取其中一部分字体的方案也有人做过，叫做字体子集化方案，不过它适合静态内容，比如咱们专题上的宣传文案。我们可以提取出那些文案中的字，作为一套新字体引用，那样就会小很多。但是呢，这个提取的过程比较麻烦，而且单独引进后日积月累越来越多，也不太好维护，还不如一张图片来得痛快。还有个问题就是，字体子集化需要该字体授权使用合同中允许才行，否则涉及到版权问题也不太好解决。
百度的字体子集化方案
那使用系统默认字体怎么能保证在不同的设备上表现一致呢？因为我看有些网站在windows和mac上一个是宋体一个是黑体。小北语气缓和了一点。
一般呢，我们在引用字体时会写上一连串字体，网页在渲染时就会按顺序寻找系统上是否有这个字体，有的话就使用这个字体渲染，没有的话就往后面找。
一般字体定义方式
你看这里“font-family”就代表字体，这样写的话在mac上就会使用苹方字体，在windows上找不到前面两个字体就使用第三个字体微软雅黑来渲染。所以把字体的顺序写好，尽量让它们用相似的字体来渲染就可以啦。一般中文字体里面包含了英文字体（26个字母），如果你对英文字体有特殊要求，可以在最前面写上，这样英文字体就会单独被渲染而不会被中文字体里的英文字体所覆盖。
说完这些，卤煮也吃完了，我们就起身回去。经过7-11便利店时，我问小北：字体这玩意儿整明白了吧？今天是不是感觉收获颇丰啊？小北说是啊，我得消化消化。
我还想喝瓶三得利，我望着小北说。
网友评论