引言
Cistercian 数字系统起源于 13 世纪的 Cistercian 修道士，是一种独特的中世纪数字表示法。该系统通过在垂直主干周围配置四个象限来表示数字，每个象限对应千位、百位、十位和个位数字。这种方法允许用单个 glyph 表示最多 9999 的数字，相比现代阿拉伯数字系统具有独特的视觉美感。
Cistercian 数字的象限结构与 SVG 渲染算法
Cistercian 数字的核心设计是将任意 1-9999 的数字分解为四个独立的数字位，每个数字位映射到特定象限。具体而言，数字从右向左、从下往上依次排列：右下角象限代表个位（ones），左下角象限代表十位（tens），右上角象限代表百位（hundreds），左上角象限代表千位（thousands）。这种排列方式形成了一个倒置的 "Z" 形结构，与现代阿拉伯数字的从左到右、从高位到低位的书写顺序截然不同。
实现 SVG 渲染算法的第一步是建立数字与笔划的映射表。对于每个象限中的数字 0-9，需要预先定义该数字在该象限内应该绘制的笔划模式。例如，在千位象限（左上）中，数字 1 对应一条从左上向右下倾斜的短斜线；而在百位象限（右上）中，相同的数字 1 则对应一条从右上向左下倾斜的短斜线。这些笔划模式必须严格遵循 Cistercian 数字的传统写法，以确保渲染结果的历史准确性。
SVG 坐标系统的设计上，建议采用宽度与高度比例为 1:2 或更窄的矩形作为画布，垂直主干位于画布左侧 1/3 处。各象限的锚点分布需要根据笔划端点进行精确规划，确保不同象限的笔划不会发生意外重叠。笔划宽度建议设置为 2-4 像素，既能保证视觉清晰度，又能维持传统手写体的优雅感。
基于类选择器的 SVG 渲染优化
一种高效的渲染策略是预先在 SVG 中定义所有可能的笔划路径，每个路径元素携带标识其所属象限和数字的 CSS 类。在初始化时，所有笔划的透明度设置为 0。渲染时，只需根据输入数字更新 SVG 容器的类名，CSS 规则即可自动控制对应笔划的可见性。
具体实现时，首先将输入数字标准化为四位字符串，不足四位前导补零。然后根据各位数字生成对应的类名字符串：千位类名为 "q1-{千位数字}"，百位类名为 "q2-{百位数字}"，十位类名为 "q3-{十位数字}"，个位类名为 "q4-{个位数字}"。将这些类名组合后赋给 SVG 容器，CSS 选择器即可匹配并显示相应的笔划。这种方法将运行时计算降至最低，复杂逻辑转移至构建时完成，特别适合需要频繁渲染 Cistercian 数字的场景。
OpenType 连字字体文件设计
将 SVG 渲染转化为可用的字体文件需要遵循 OpenType 规范定义连字特性。首先需要使用字体编辑工具（如 FontForge 或 glyphsLib）创建 10000 个独立的 glyph，每个 glyph 对应 0000 至 9999 的一个数字组合。glyph 命名采用统一前缀加数字编号的方式，例如 "cistercian_1234" 表示数字 1234 对应的 Cistercian 符号。
连字替换规则通过 OpenType 的 liga 特性实现。规则格式为 "sub digit1 digit2 digit3 digit4 by glyph_name"，表示将连续输入的四个数字字符替换为指定的 Cistercian glyph。特征文件（.fea）中的规则定义示例如下：feature liga {sub one two three four by cistercian_1234;} liga;。需要特别注意的是，连字匹配采用最长前缀优先策略，因此规则列表必须按照数字长度从长到短排列，先定义所有四位数的替换，再定义三位数、二位数和一位数的替换，以防止较短序列提前匹配。
对于超过四位的数字序列，字体引擎会自动从左向右应用连字规则，每次处理四个数字。这意味着输入 "12345" 时会先匹配 "1234" 转换为对应的 Cistercian 符号，然后继续处理剩余的 "5"。
工程化实现参数与监控要点
在工程实现中，以下参数值得特别关注。首先是视图框尺寸，建议采用 200x400 或类似比例，为垂直主干和四个象限预留足够空间。其次是主干线条粗细，推荐值为画布宽度的 8%-12%，过粗会挤压象限空间，过细则影响视觉权重。第三是各象限的内边距设置，确保笔划不会贴近边界，同时相邻象限的笔划保持适当间距避免混淆。
构建流程的监控应覆盖以下几个维度：glyph 覆盖率统计用于确认 10000 个组合是否全部生成；连字规则冲突检测用于识别可能导致匹配异常的规则顺序问题；渲染一致性校验用于比对不同技术路径（SVG 类选择器 vs 运行时路径拼接）生成结果的差异。此外，在 Web 字体场景下还需监控 FOUT（Flash of Unstyled Text）现象对用户交互的影响。
资料来源
本文技术细节参考 Digital Seams 博客关于 Cistercian 数字连字体实现的项目，该项目完整开源代码存放于 GitHub 仓库 bobbiec/cistercian-font。