JS打造一款你自己的专用字体：使用p5.js与JavaScript实现

前言

在最近的生成艺术项目中遇到一个小问题：如何在作品中优雅地添加文本元素，同时避免使用网络字体，要么侵权要么花钱~~给项目增加不必要的负担，我决定不走寻常路，自己动手，丰衣足食，用JS打造一款自己的专用字体！

问题分析

首先，虽然网上字体库很多而且也比较方便，但除了某些字体版权限制之外其显示效果往往受限于用户的浏览器和设置，导致在不同环境下出现视觉差异，这对于追求视觉一致性的艺术作品来说是不可接受的。其次，直接嵌入字体文件虽然能解决一致性问题，但会增加页面加载时间，影响用户体验。更关键的是，我渴望在这个项目中实现每一个视觉元素的自主创作，让作品真正打上“原创”的标签。

解决方案：手写字母表

于是，我萌生了一个大胆的想法：使用p5.js这个强大的图形库结合JavaScript的灵活编程能力，自行绘制一套路径式字母表。这种方法的好处在于，我可以完全控制每个字母的形状、线条粗细、颜色等属性，实现高度的自定义和个性化。

实现步骤

1. 实现原理

在深入探索字体设计的奥秘时，首先系统地查阅了字体结构中那些关键点的术语与位置，它们如同构建字体的基石，为我后续的创作提供了坚实的理论基础。然而，在实际动中生成手绘制字母时，并没有遵循传统路径，而是选择了一条更为直观且富有创意的道路——以中心点（mid_x, mid_y）观察字母间的间距调整（kerning）时，意识到如果从字母底部左侧这一自然起点出发进行定义，将能更有效地解决当前存在的一些细微不一致问题。于是，在Letter类的设计中，重新布局了包括x高度、顶端高度在内的多个关键位置参数，这些参数不仅与字体大小紧密相关，更以中心点为基准，构建了一个灵活而精确的坐标体系。

为了进一步提升字母的精细度和美观度，还引入了一系列与高度成比例的小距离调整值。这些调整值，如this.adj_1至this.adj_4等，通过乘以字体全高（h_full）的不同比例系数得出，为字母的每一个细节点提供了微调的可能性。例如，this.adj_1是字体全高的5%，而this.adj_4则是其20%，这样的设计使得在保持整体协调的同时，能够轻松地对字母的局部进行精细雕琢。如下是设定的一些与高度相关的小距离，用来微调各个点的位置。具体如下：

this.adj_1 = this.h_full * 0.05;
this.adj_15 = this.h_full * 0.075;
this.adj_2 = this.h_full * 0.1;
this.adj_25 = this.h_full * 0.125;
this.adj_3 = this.h_full * 0.15;
this.adj_35 = this.h_full * 0.175;
this.adj_4 = this.h_full * 0.2;

2. 定义字母

在纸上随手写下每个字母，捕捉其自然的流动与形态。这些草图是我对字母最直观的反映。再利用p5.js，根据草图勾勒出字母的初步路径。这些路径由上述关键点组成，它们标记了字母轮廓的转折点。路径的初步定义往往不够完美，需要反复调整。通过移动关键点的位置、修改路径的曲率，甚至添加新的点来细化字母的形状，以确保字母既符合审美又易于识别。字母的形状达到满意后，我会进行最终的测试，确保它在不同尺寸和背景下都能保持良好的显示效果，

create_a(){   
  this.paths = [
    [ // stem
      {x: this.x_left+this.adj_2, y: this.y_x + this.adj_4},
      {x: this.x_left+this.adj_3, y: this.y_x + this.adj_1},
      {x: this.x_mid+this.adj_2, y: this.y_x},
      {x: this.x_right, y: this.y_x+this.adj_2},
      {x: this.x_right, y: this.y_base-this.adj_4},
      {x: this.x_right+this.adj_1, y: this.y_base},
    ],
    [ // round
      {x: this.x_right-this.adj_1, y: this.y_mid-this.adj_15},
      {x: this.x_mid-this.adj_1, y: this.y_mid-this.adj_1},
      {x: this.x_left, y: this.y_mid+this.adj_35},          
      {x: this.x_mid, y: this.y_base},
      {x: this.x_mid+this.adj_2, y: this.y_base-this.adj_1},
      {x: this.x_right+this.adj_2, y: this.y_base - this.adj_4},
    ]
  ];
}

3. 路径弯曲处理

使用 Chaikin 曲线算法来平滑路径

Chaikin 平滑曲线算法是一种递归方法，用于对多边形（或路径）进行平滑处理，使得其形状更加自然和流畅。这种方法特别适用于计算机图形学和字体设计等领域，因为它能够生成视觉上更加吸引人的曲线。

这个图可以直观的看出来它是如何工作的

接下来我将详细解释如何使用 Chaikin 算法来平滑一条简单的路径。假设我们有一个由点集 P = {p0, p1, ..., pn} 组成的路径，其中 n 是点的总数。

Chaikin 平滑算法步骤

初始化：首先，我们有一个由 n+1 个点（包括起始点和终止点）组成的路径 P。
递归步骤：在每一轮递归中，我们创建一个新的点集 P'，它包含以下点：
- 开始点：P' 的第一个点是 P 的第一个点 p0。
- 中间点：对于 P 中的每一对相邻点 (pi, pi+1)（其中 i 从 0 到 n-2），我们在距离 pi 25% 和距离 pi+1 75% 的位置插入两个新点。这两个新点的位置可以用向量计算得出，例如，第一个新点 qi 可以用 (3/4) * pi + (1/4) * (pi+1) 计算，第二个新点 qi+1 用 (1/4) * pi + (3/4) * (pi+1) 计算。
- 结束点：P' 的最后一个点是 P 的最后一个点 pn。
递归终止：重复上述步骤，直到路径 P' 足够平滑或达到预设的递归深度。

我们按照以下步骤创建一条新路径：

复制第一个点（末端保持原位）
对于最后一点之前的其余点：
- 在距上一点 25% 的位置添加一个点
- 在距离下一个点 25% 的位置添加一个点
复制最后一点。

一轮之后，我们得到了这个。新路径用红色标记。

然后我们对得到的路径应用相同的步骤。得到下面第 2 轮和第 3 轮之后的结果。

最终结果如下

经过一轮处理后，路径变得更加平滑。对于小尺寸字体，3 到 4 轮的 Chaikin 算法迭代就足够了。如果字体尺寸较大，可以增加迭代次数，确保边缘不过于尖锐。

代码优化

通过将路径定义与中点、字母顶点等关键位置关联起来，可以更清晰地理解如何绘制字母路径，例如，与其说“b 的主干从中点上方 14.1 像素处开始，到中点下方 7.4 像素处结束”，不如简单地理解为“b 的主干从字母顶点延伸到字母底部”，这样更容易理解。

然而，最终生成的代码非常冗长，不够简洁，就像上面的 create_a 函数那样，看上去就乱

为了解决这个问题，编写了一个函数用来遍历每个字母并生成新的代码将所有内容转换成简单的数值格式，如下：

let string = "";
    for(let l of this.letters){
      string += "create_" + l.letter + "(){\n";
      string += "  this.ip = [\n";
      for(let path of l.ip){
        string += "  [";
        for(let p of path){
          string += "{x: " + nf(p.x, 0, 1) + ", y: " + nf(p.y, 0, 1)  + "}";
          if (path.indexOf(p) != path.length-1) string += ", ";
        }
        string += "]";
        if (l.ip.indexOf(path) != l.ip.length-1) string += ",\n";
        else string += "\n";
      }
      string += "  ]\n";
      string += "}\n";
    }
    console.log(string)

这样一来，生成字母啊的函数大大减少了：

create_a(){
  this.ip = [
    [{x: -2.8, y: -3.4}, {x: -1.7, y: -6.8}, {x: 2.3, y: -8.0}, {x: 5.4, y: -5.7}, {x: 5.4, y: 2.9}, {x: 6.6, y: 7.4}],
    [{x: 4.3, y: -1.7}, {x: -0.9, y: -1.1}, {x: -5.1, y: 3.9}, {x: -2.1, y: 7.4}, {x: 2.3, y: 6.3}, {x: 5.4, y: 2.9}]
  ]
}