关于 python：如何使用 svg 绘制字体的字形？

how to draw a font’s glyphs using svg?

我正在尝试绘制 ttf 字体文件的所有字形。
我使用 TTX 创建了一个 XML 文件，并用 python 解析它以编写 html 文件并创建 SVG。但 SVG 不支持具有两个以上控制点的曲线，因此轮廓不是应有的样子。

我该如何解决这个问题？或者有没有其他方法来绘制字形轮廓？

这是我使用的html代码：

1
2
3
4
5
6
7
8
9
10
11
12

这就是字形轮廓的样子(来自 fontLab Studio)

Truetype 字体不使用三次贝塞尔曲线。他们使用二次贝塞尔曲线。因此，如果您看到一系列点：”开、关、关”，那不是具有两个端点和两个控制点的三次贝塞尔曲线。这实际上是一个二次贝塞尔曲线，具有两个端点(“曲线上”点)、两个控制点(“曲线外”点)和一个下降的中间”开启”点。即：

1	on off (on) off on

要重建中间的开点，你只需要找到两个”关”控制点之间的中点。

因此，例如，第一个”立方”贝塞尔线段：

1	C 221,168, 171,176, 152,187

可能意味着是两条二次贝塞尔曲线：

1 2	Q 221,168, 191,172 Q 171,176, 152,187

其中新端点(“曲线上”点)(191,172) = ((221 171) / 2, (168 176) / 2)。

请注意，我在这里猜测，因为我不知道文件中的原始坐标和标志是什么。

如果您有较长的”偏离曲线”点序列，则需要插入额外的”曲线上”点。例如，在某一点上，我可以看到一系列四个关闭点，因此您需要插入三个开启点。

1	on off (on) off (on) off (on) off on

同样，在每种情况下，只需计算两个相邻关闭点之间的中间点。

更新

例如，这是从 TTF 文件转储的字形数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

Glyph 54: off = 0x00001E36, len = 210
numberOfContours: 1
xMin: 54
yMin: –12
xMax: 502
yMax: 712

EndPoints
———
0: 44

Coordinates
———–
0: Rel ( 431, 578) –> Abs ( 431, 578) on
1: Rel ( –60, 40) –> Abs ( 371, 618)
2: Rel ( –53, 0) –> Abs ( 318, 618) on
3: Rel ( –43, 0) –> Abs ( 275, 618)
4: Rel ( –48, –42) –> Abs ( 227, 576)
5: Rel ( 0, –32) –> Abs ( 227, 544) on
6: Rel ( 0, –22) –> Abs ( 227, 522)
7: Rel ( 31, –42) –> Abs ( 258, 480)
8: Rel ( 23, –20) –> Abs ( 281, 460) on
9: Rel ( 77, –62) –> Abs ( 358, 398) on
10: Rel ( 52, –42) –> Abs ( 410, 356)
11: Rel ( 59, –64) –> Abs ( 469, 292)
12: Rel ( 33, –72) –> Abs ( 502, 220)
13: Rel ( 0, –42) –> Abs ( 502, 178) on
14: Rel ( 0, –44) –> Abs ( 502, 134)
15: Rel ( –58, –90) –> Abs ( 444, 44)
16: Rel ( –109, –56) –> Abs ( 335, –12)
17: Rel ( –75, 0) –> Abs ( 260, –12) on
18: Rel ( –57, 0) –> Abs ( 203, –12)
19: Rel ( –112, 36) –> Abs ( 91, 24)
20: Rel ( –37, 34) –> Abs ( 54, 58) on
21: Rel ( 51, 80) –> Abs ( 105, 138) on
22: Rel ( 33, –24) –> Abs ( 138, 114)
23: Rel ( 69, –32) –> Abs ( 207, 82)
24: Rel ( 41, 0) –> Abs ( 248, 82) on
25: Rel ( 47, 0) –> Abs ( 295, 82)
26: Rel ( 62, 51) –> Abs ( 357, 133)
27: Rel ( 0, 46) –> Abs ( 357, 179) on
28: Rel ( 0, 34) –> Abs ( 357, 213)
29: Rel ( –42, 57) –> Abs ( 315, 270)
30: Rel ( –39, 30) –> Abs ( 276, 300) on
31: Rel ( –69, 51) –> Abs ( 207, 351) on
32: Rel ( –58, 49) –> Abs ( 149, 400) on
33: Rel ( –14, 13) –> Abs ( 135, 413)
34: Rel ( –33, 42) –> Abs ( 102, 455)
35: Rel ( –20, 53) –> Abs ( 82, 508)
36: Rel ( 0, 34) –> Abs ( 82, 542) on
37: Rel ( 0, 45) –> Abs ( 82, 587)
38: Rel ( 42, 59) –> Abs ( 124, 646)
39: Rel ( 41, 32) –> Abs ( 165, 678)
40: Rel ( 78, 34) –> Abs ( 243, 712)
41: Rel ( 61, 0) –> Abs ( 304, 712) on
42: Rel ( 56, 0) –> Abs ( 360, 712)
43: Rel ( 95, –34) –> Abs ( 455, 678)
44: Rel ( 26, –27) –> Abs ( 481, 651) on

我已将”on”添加到所有标记(此处未显示)表明它们应为曲线上点的点。

因此，如果我们绘制曲线上点(绿色)和曲线外点(红色)，我们会得到：

1
2
3
4
5
6
7

.on {
fill: green;
}

.off {
fill: red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!— 54,–12 502,712 —>
<svg width="500px" height="500px" viewBox="54 -12 448 724" overflow="visible">
<g transform="translate(0,712) scale(1,-1)">

现在到路径。我们使用二次贝塞尔 (Q) 路径命令。如上所述，如果我们有两个相邻的曲线外点，我们会插入一个计算得出的曲线上点。插入点只是两个曲线外点的平均值。如果有两个相邻的曲线上点，我们插入一条线 (L)。

这给了我们以下结果。左栏中的坐标是原始的开/关点。右列中的坐标是插入的计算点。

1
2
3
4
5
6
7
8
9
10
11
12

.on {
fill: green;
}

.off {
fill: red;
}

path.outline {
fill: none;
stroke: grey;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

<!— 54,–12 502,712 —>
<svg width="500px" height="500px" viewBox="54 -12 448 724" overflow="visible">
<g transform="translate(0,712) scale(1,-1)">

如果我们只用黑色绘制形状，我们会得到一个看起来正确的字形。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/python/267942.html

关于 python：如何使用 svg 绘制字体的字形？

how to draw a font’s glyphs using svg?

相关推荐

发表回复