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 | <html lang="en"> <head> <meta charset="UTF-8"> font </head> <body> <svg width="800" height="800" viewbox="0 0 2000 300" overflow="visible"> <g transform="scale(1,-1)"> <path d="M255 168 C221 168,171 176,152 187 Q102 212,102 272 Q102 331,156 385 C204 433,351 493,414 493 C456 493,503 464,503 434 Q503 393,451 352 C431 336,386 310,362 303 L355 303 Q345 303,339 310 Q333 317,332 328 C332 334,340 348,351 350 Q374 356,412 383 Q456 412,456 434 C456 440,440 446,426 446 C412 446,381 442,358 437 C347 435,323 429,311 425 C242 399,149 316,149 272 C149 240,200 215,244 215 Q293 215,359 229 Q397 237,411 240 Q433 246,465 257 C478 260,502 268,524 276 L534 279 Q544 279,551 272 Q556 264,556 255 C556 248,550 238,541 233 L415 188 Q333 156,281 128 Q209 91,172 51 Q139 16,122 -17 Q107 -51,107 -80 Q107 -129,151 -162 Q193 -191,257 -191 L478 -88 Q484 -81,494 -80 C502 -80,519 -95,519 -106 Q519 -114,512 -121 Q460 -179,389 -211 Q326 -239,261 -239 C176 -239,59 -150,59 -80 C59 -44,96 38,137 83 Q159 107,190 128 C202 138,237 159,255 168" stroke="black" fill="transparent"></path> </svg> </body> </html> |
这就是字形轮廓的样子(来自 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)"> <g class="points"> <circle cx="431" cy="578" r="5" class="on"/> <circle cx="371" cy="618" r="5" class="off"/> <circle cx="318" cy="618" r="5" class="on"/> <circle cx="275" cy="618" r="5" class="off"/> <circle cx="227" cy="576" r="5" class="off"/> <circle cx="227" cy="544" r="5" class="on"/> <circle cx="227" cy="522" r="5" class="off"/> <circle cx="258" cy="480" r="5" class="off"/> <circle cx="281" cy="460" r="5" class="on"/> <circle cx="358" cy="398" r="5" class="on"/> <circle cx="410" cy="356" r="5" class="off"/> <circle cx="469" cy="292" r="5" class="off"/> <circle cx="502" cy="220" r="5" class="off"/> <circle cx="502" cy="178" r="5" class="on"/> <circle cx="502" cy="134" r="5" class="off"/> <circle cx="444" cy=" 44" r="5" class="off"/> <circle cx="335" cy="-12" r="5" class="off"/> <circle cx="260" cy="-12" r="5" class="on"/> <circle cx="203" cy="-12" r="5" class="off"/> <circle cx=" 91" cy=" 24" r="5" class="off"/> <circle cx=" 54" cy=" 58" r="5" class="on"/> <circle cx="105" cy="138" r="5" class="on"/> <circle cx="138" cy="114" r="5" class="off"/> <circle cx="207" cy=" 82" r="5" class="off"/> <circle cx="248" cy=" 82" r="5" class="on"/> <circle cx="295" cy=" 82" r="5" class="off"/> <circle cx="357" cy="133" r="5" class="off"/> <circle cx="357" cy="179" r="5" class="on"/> <circle cx="357" cy="213" r="5" class="off"/> <circle cx="315" cy="270" r="5" class="off"/> <circle cx="276" cy="300" r="5" class="on"/> <circle cx="207" cy="351" r="5" class="on"/> <circle cx="149" cy="400" r="5" class="on"/> <circle cx="135" cy="413" r="5" class="off"/> <circle cx="102" cy="455" r="5" class="off"/> <circle cx=" 82" cy="508" r="5" class="off"/> <circle cx=" 82" cy="542" r="5" class="on"/> <circle cx=" 82" cy="587" r="5" class="off"/> <circle cx="124" cy="646" r="5" class="off"/> <circle cx="165" cy="678" r="5" class="off"/> <circle cx="243" cy="712" r="5" class="off"/> <circle cx="304" cy="712" r="5" class="on"/> <circle cx="360" cy="712" r="5" class="off"/> <circle cx="455" cy="678" r="5" class="off"/> <circle cx="481" cy="651" r="5" class="on"/> </g> </g> </svg> |
现在到路径。我们使用二次贝塞尔 (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)"> <path class="outline" d="M 431, 578 Q 371, 618 318, 618 Q 275, 618 251,597 Q 227, 576 227, 544 Q 227, 522 243.5,501 Q 258, 480 281, 460 L 358, 398 Q 410, 356 439.5,324 Q 469, 292 485.5,256 Q 502, 220 502, 178 Q 502, 134 473,89 Q 444, 44 389.5,16 Q 335, -12 260, -12 Q 203, -12 147,6 Q 91, 24 54, 58 L 105, 138 Q 138, 114 172.5,98 Q 207, 82 248, 82 Q 295, 82 325,107.5 Q 357, 133 357, 179 Q 357, 213 336,240.5 Q 315, 270 276, 300 L 207, 351 L 149, 400 Q 135, 413 118.5,434 Q 102, 455 92,481.5 Q 82, 508 82, 542 Q 82, 587 103,616.5 Q 124, 646 144.5,662 Q 165, 678 204,695 Q 243, 712 304, 712 Q 360, 712 407.5,695 Q 455, 678 468,664.5 L 481, 651 Z"/> <g class="points"> <circle cx="431" cy="578" r="5" class="on"/> <circle cx="371" cy="618" r="5" class="off"/> <circle cx="318" cy="618" r="5" class="on"/> <circle cx="275" cy="618" r="5" class="off"/> <circle cx="227" cy="576" r="5" class="off"/> <circle cx="227" cy="544" r="5" class="on"/> <circle cx="227" cy="522" r="5" class="off"/> <circle cx="258" cy="480" r="5" class="off"/> <circle cx="281" cy="460" r="5" class="on"/> <circle cx="358" cy="398" r="5" class="on"/> <circle cx="410" cy="356" r="5" class="off"/> <circle cx="469" cy="292" r="5" class="off"/> <circle cx="502" cy="220" r="5" class="off"/> <circle cx="502" cy="178" r="5" class="on"/> <circle cx="502" cy="134" r="5" class="off"/> <circle cx="444" cy=" 44" r="5" class="off"/> <circle cx="335" cy="-12" r="5" class="off"/> <circle cx="260" cy="-12" r="5" class="on"/> <circle cx="203" cy="-12" r="5" class="off"/> <circle cx=" 91" cy=" 24" r="5" class="off"/> <circle cx=" 54" cy=" 58" r="5" class="on"/> <circle cx="105" cy="138" r="5" class="on"/> <circle cx="138" cy="114" r="5" class="off"/> <circle cx="207" cy=" 82" r="5" class="off"/> <circle cx="248" cy=" 82" r="5" class="on"/> <circle cx="295" cy=" 82" r="5" class="off"/> <circle cx="357" cy="133" r="5" class="off"/> <circle cx="357" cy="179" r="5" class="on"/> <circle cx="357" cy="213" r="5" class="off"/> <circle cx="315" cy="270" r="5" class="off"/> <circle cx="276" cy="300" r="5" class="on"/> <circle cx="207" cy="351" r="5" class="on"/> <circle cx="149" cy="400" r="5" class="on"/> <circle cx="135" cy="413" r="5" class="off"/> <circle cx="102" cy="455" r="5" class="off"/> <circle cx=" 82" cy="508" r="5" class="off"/> <circle cx=" 82" cy="542" r="5" class="on"/> <circle cx=" 82" cy="587" r="5" class="off"/> <circle cx="124" cy="646" r="5" class="off"/> <circle cx="165" cy="678" r="5" class="off"/> <circle cx="243" cy="712" r="5" class="off"/> <circle cx="304" cy="712" r="5" class="on"/> <circle cx="360" cy="712" r="5" class="off"/> <circle cx="455" cy="678" r="5" class="off"/> <circle cx="481" cy="651" r="5" class="on"/> </g> </g> </svg> |
如果我们只用黑色绘制形状，我们会得到一个看起来正确的字形。
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 | <svg width="100px" height="100px" viewBox="54 -12 448 724" overflow="visible"> <g transform="translate(0,712) scale(1,-1)"> <path d="M 431, 578 Q 371, 618 318, 618 Q 275, 618 251,597 Q 227, 576 227, 544 Q 227, 522 243.5,501 Q 258, 480 281, 460 L 358, 398 Q 410, 356 439.5,324 Q 469, 292 485.5,256 Q 502, 220 502, 178 Q 502, 134 473,89 Q 444, 44 389.5,16 Q 335, -12 260, -12 Q 203, -12 147,6 Q 91, 24 54, 58 L 105, 138 Q 138, 114 172.5,98 Q 207, 82 248, 82 Q 295, 82 325,107.5 Q 357, 133 357, 179 Q 357, 213 336,240.5 Q 315, 270 276, 300 L 207, 351 L 149, 400 Q 135, 413 118.5,434 Q 102, 455 92,481.5 Q 82, 508 82, 542 Q 82, 587 103,616.5 Q 124, 646 144.5,662 Q 165, 678 204,695 Q 243, 712 304, 712 Q 360, 712 407.5,695 Q 455, 678 468,664.5 L 481, 651 Z"/> </g> </svg> |