科普-全面剖析TTF字体技术和矢量字库的技术原理及实现

发布于 2020-05-18  1,874 次阅读


字体,很简单;字体,却又很难轻易看懂;字体,不会让你简单就能明白……在我们的生活中与现实中,很多事情常常都是互补的。在生活会有很多常见的一些字体。这篇文章就将为你全面剖析 TTF 字体技术和矢量字库的技术原理及实现。(推荐设计师朋友仔细看看)

预警:本文纯干货,文字很多

TTF(TrueTypeFont)字体原理简介

科普-全面剖析TTF字体技术和矢量字库的技术原理及实现插图

TrueType是 苹果 和 微软 在1991年时合作推出的一种新型数学字形描述技术。它用数学函数描述字体轮廓外形,含有字形构造、颜色填充、数字描述函数、流程条件控制、栅格处理控制、附加提示控制等指令。

TrueType采用几何学中二次Bezier曲线及直线来描述字体外形轮廓,特点是:TrueType既可用作打印,又可用作屏幕显示;由于它用指令对字形进行描述,因此用这种技术 设计 出来的字体与分辨率无关,输出时总是按打印机分辨率输出。因为二次函数导函数的连续性,所以无论放大或缩小,字符总是光滑的,不会有锯齿出现。但相对PostScript字体来说,其质量要差一些。特别是在文字太小时,就表现得不是很清楚,下面就TrueType技术作一点简单的介绍。

一、字体的轮廓实现

TrueType字体标准的主要思想是将所有的文字看成是一些相互独立的图像区域的组合,这些图像区域由一条封闭的曲线围成,而这条曲线由一些相互联系的点构成。由此,要记录一个文字,只需记录这个文字的图像区域,进而只需记录曲线,最后只需记录构成这些曲线的点的相对坐标就可完成对文字的记录和处理。

在一个TrueType类型的字体中,文字图像的形状是由它们的外围线来描述的。这些外围线形成了一系列的图像域。一个简单的文字可能只有一个图像域,而大部分的文字可能包含两个甚至更多的图像域。而一些控制字符因为不可见,从而没有图像域。例如,字符‘7’由一条闭合曲线组成,所以它只包含一个图像域;而字符‘i’由两条闭合曲线组成,所以它包含两个图像域,而字符‘B’则由三条闭合曲线组成,所以它包含三个图像域。

在TrueType字体文件中,每个字符的图像域的轮廓线由直线和曲线组成,每一条曲线可由一系列的二次Bezier曲线组成。

字形的轮廓是由一串有序控制点组成,控制点有在线上和不在线上两种属性。这些控制点通过二次Bezier曲线来决定实际的轮廓曲线,图1(a)是最简单的二次Bezier曲线的模型。其中,P0、P2点是实际轮廓曲线必须通过的点,P1点为不在线控制点。实际轮廓曲线上的点P的坐标P(x(u),y(u))由如下公式决定:

x(u)=x0+2(x1-x0)u+(x2-2x1+x0)u2 y(u)=y0+2(y1-y0)u+(y2-2y1+y0)u2

其中,P0(x0, y0)、P1(x1, y1)、P2(x2, y2)分别是P0、P1、 P2点的坐标;u为参数,取值范围为0≤u≤1。  

科普-全面剖析TTF字体技术和矢量字库的技术原理及实现插图(2)