TrueType 与贝塞尔曲线

Photo by Çağdaş Ermiş on Unsplash

TrueType字体中的字符(或字形)轮廓由直线和二次贝塞尔曲线(bézier)片段构成 —— 维基百科。当我们使用 ttf.js 来解析 TTF 字体的时候,可以得到每个文字所包含的轮廓点的信息。这个轮廓点信息由直线和贝塞尔曲线构成。我们可以利用这些轮廓点来生成 SVG 图片。

图中 Q 开头的坐标都是二阶贝塞尔曲线的控制点。通过控制点信息,依据二次贝塞尔曲线公式就可以渲染出轮廓线条。对其进行填充后,就能得到一个实心的字体或是图标。

继续阅读TrueType 与贝塞尔曲线