网易乐得技术团队

字体使用常识

核心概念 & 分析字体

几个易混淆的概念

字形(glyph):好似一个字的骨架,字形展现了一个字的结构,如笔画方向和笔画位置等;
以繁体和简体,或以旧字形和现代字形书写同一个汉字,都是字形不同。
字型(font):基于同一设计风格的字形集合,或称字体系列;
如:冬青黑体、汉仪旗黑实际是两个不同的字型。
字体(typeface):好似字骨架上的肌肉,包含具体属性参数的某一个typeface;
如,「300 字重 15 号的中易宋体」这样的描述才可以称为一个字体。
字形、字型、字体区分
上图每个字下方有三行说明(第三行无说明的使用默认特性),分别对应了字形、字型、字体;以第三个字作为对照字,很容易区分这三个概念。
也就是说,日常讨论的「字体」其实是指「字型」,不过,在后文我们仍使用日常论述。

字体的核心特性

重心:字体视觉中心点的高低,决定了阅读的流畅性
一般而言,瘦高的字重心高,扁平的字重心低,现在的文章段落一般选择横排,选择扁平的字体,有助于保证横向阅读的流畅性,如:微软雅黑。
重心
字重:字体笔画的粗细,使用系列字体时可以以此区分主题
一般认为,纤细的字体更加轻快、明亮、女性化;厚重的字体更加稳定、大气、男性化。
字重
字怀:笔画中留白部分的多少,决定了字体的视觉平衡性
字怀体现着色密度分配,有没有噪点,使用均匀留白的字体,版面整洁。
字怀
字面:字体所占字面框的字面比例大小,字面大小一致均匀,才有视觉张力
字面一致的字体,带来良好的阅读节奏。
字面
中宫:字体内部结构的松紧,决定了焦点大小;
一般而言,大字要紧密无间,小字要宽绰有余:匾额的大字,中宫要收敛,不然字看起来显得散漫不抓眼球,而日常阅读使用的小字,中宫要放松,不容易产生疲劳感。
中宫

上述5个维度,中宫可以看成汉字的独有特性,其他4个特性中西文通用;
可以通过5个对应的形容词,更好地理解这5个维度,这便于对字体做一些定性分析
通过对应的释义,不难发现,字体设计是为文字的易读性服务的。

分类方法 & 选择字体

最实用的分类办法

字体分类方法很多,但多数界限不够明确,过于学术化。
今天介绍的这种分类方式,分类条件也不严格互斥,但是最实用。
最实用的分类办法
倒序来看这5个类别:
艺术体与手写体一看便知道是什么,日常应用较少,在此不赘述;
等宽体为西文字体所独有,主要被程序员使用,一般认为,等宽字符方便列操作;
衬线体与无衬线体(亦即中文中的宋体与黑体),是日常应用的主打组合,以下重点介绍。

想区分衬线体与无衬线体,首先要知道衬线是什么,衬线即字笔画开端与收尾处的装饰;
关于衬线起源,一般也对应东西方两种说法:
衬线的起源

  1. 在古罗马,刻碑文时,需先使用方形笔把字印上去,方形笔的开始和收尾不可避免地留下参差的笔触
  2. 木活字盛行的印刷时代,由于木头有纵向纹理,写字的时候,竖向的笔画容易变细,开端收尾处不够明显,所以刻意把竖向笔画写粗,结尾留下装饰

所以区分衬线体与无衬线体,主要从两方面出发:有没有装饰,不同向线条粗细对比差距大不大:
衬线体与无衬线体

一般认为衬线字体特征性强,容易识别,可以加速阅读;
无衬线体在地分辨率设备显示好,阅读起来不容易视疲劳。

字体印象坐标

字体印象坐标
上图中列举了一些典型字体,按照观感定位到了「字体印象坐标」中,基于这幅图景,可以帮助我们快速选择字体。
一般而言:

  • 衬线体集中在第一象限,无衬线体在4象限,其他几种字体多数不够锐利,所以在二三象限
  • 越是汇聚在原点附近的字体,越是没有个性,就越是通用

平台差异

1
font-family: Helvetica, Arial, "冬青黑体", "微软雅黑", "Droid Sans", sans-serif;

上述代码出现是前端开发的界面样式表中,用于定义字体显示规则。这个规则即体现了不同平台对字体支持的差异。
规则说明:
在网页渲染时,浏览器会逐字符依次匹配规则中的字体,找到对应字体表达为止,如字体列表都不能表达对应字体,则使用浏览器默认的无衬线体;
上述五个字体依次对应不同的平台表达:

  1. OS X 、iOS 系统英文无衬线体
  2. Windows 系统的英文无衬线体
  3. OS X 、iOS 系统中文无衬线体
  4. Windows 系统的中文无衬线体
  5. Android 系统的中西文默认无衬线体
    逐字符含义简析,如英文字体不会设计中文字形的表达,而中文字体中往往会设计英文字形的表达,但一般认为英文字体显示英文更佳,所以要将英文字体列在前面;这种逐字符表达方式是 webfont 等应用技术的基础,后文会再次提及

版权保护 & 研发字体

侵权案例

承上文,软件应用中,考虑到不同的系统基于自己的软硬件特性,会预装不同的字体,超出系统默认字体集后,就要提及版权问题了。
关于商用字体侵权,我国还没有清晰的条例界定。
举一个例子:
宝洁在「飘柔」商标中使用方正字体
暴雪娱乐在游戏程序中使用方正字体
北大方正分别起诉过宝洁和暴雪娱乐字体侵权,宝洁案方正败诉,暴雪娱乐案方正胜诉。
二者最主要的不同是:暴雪娱乐在程序中使用了未经授权的方正的字体包,坐实了侵权的证据;负责宝洁的「飘柔」商标设计的NICE广告公司购买过方正倩体,如对其提供给客户(宝洁)单字使用的设计成果另行授权,将造成购买者使用困难,所以不认定为侵权。

那么,如何避免侵权使用字体呢:

  • 使用免费字体
  • 购买字体授权
  • 自己设计字体

字体研发

结合毛泽东手写体,简单介绍下字体研发的一般过程:

  1. 立意:体现天降伟人的品格,字体观感要磅礴潇洒大气
  2. 创作摸板字:如,选择下图中《沁园春·长沙》——毛书法和诗词的代表作,来作为模板字,因为这首词集齐了汉字笔画的主要特征,并且充分体现了前面的立意
  3. 拓展拼合:提取模板字笔画,整合优化,拓展到整个字符集
  4. 技术封装:输出可用的字体包
  5. 字形检测:一般要验证字形是否出错、整体视觉效果是否协调等
    毛泽东手写体的研发
    对于一般的非商用造字,现在也有通过机器学习技术,设计一套模板字,拓展出整个字符集的黑科技,在此不赘述。

编码原理 & 妙用字体

字体编码简介

在计算机中,一般通过 Unicode 这样的编码标准来规范文字的呈现方式,Unicode 即建立一种映射关系集,对于使用者而言,定义了每个字符是怎样书写的,对于计算机而言,定义了每个字符对应的二进制码。

1
2
3
01011100 00001111 -> \u5c0f -> 小
01010010 01001101 -> \u524d -> 前
01111010 11101111 -> \u7aef -> 端

回顾一下前文提及的逐字符显示规则:在西文字体中一般不设计汉字表达,对应汉字表达的位置就是空位;除了常规的文字标点,Unicode 编码还预留了大量的空位用于自定义字符。

编码原理妙用

webfont

在前端开发中广泛使用的 webfont,就是基于这个原理实现的,如:
手机淘宝的icon库
这套手机淘宝的 icon 库,就是一套不设计普通字符表达的字体包。
乐得的 UED 和前端协作中也大量使用了 webfont ,基于这种技术,不需要针对图标类矢量图形重复切图,保证了展示效果,提高了交接效率,提升了使用的性能。

其他应用场景

除了webfont,编码原理还可以有一些个性化的应用。
如图:
在fonteditor中替换字符
在字体编辑器中,我将「0」和「1」的字符互换,类似互换其他一些常用的字符。
应用了偷梁换柱后的新字体后,在浏览器中看一下效果:
替换字符后的展示效果
用户想要看到的表达是2018.03.14,浏览器得到的数据源码却是9108.13.04,这种玩法可以增加别人爬虫实效性数据的难度。
同样基于字符互换原理,还可以衍生许多有意思的玩法,如:

  • 在有敏感词过滤机制的平台中,使用经过字符替换的特殊字体表达文本信息,对机器,规避了过滤规则,对读者而言,还原了表达的内容
  • 使用经过字符替换的特殊字体表达文本信息,借力热点词条等,「欺骗」搜索引擎,提升内容的搜索权重