草庐IT

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

codeneng 2023-03-28 原文

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>

  • 感谢您回答我的问题，但它不起作用......我尝试了您所说的，但结果不是应该的。
  • 我相信我做对了。我会在我的答案中添加一个例子来证明这一点。

pythonsvgspanclassnbspbezierfontshtml

有关关于 python：如何使用 svg 绘制字体的字形？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序，它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重，我想提高压缩级别，因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗？是否有另一个允许指定压缩级别的Ruby库？ 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  4. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  5. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  6. ruby - 在 Ruby 中使用匿名模块 - 2

    假设我做了一个模块如下:m=Module.newdoclassCendend三个问题:除了对m的引用之外，还有什么方法可以访问C和m中的其他内容？我可以在创建匿名模块后为其命名吗(就像我输入“module...”一样)？如何在使用完匿名模块后将其删除，使其定义的常量不再存在？ 最佳答案 三个答案:是的，使用ObjectSpace.此代码使c引用你的类(class)C不引用m:c=nilObjectSpace.each_object{|obj|c=objif(Class===objandobj.name=~/::C$/)}当然这取决于

  7. ruby - 使用 ruby​​ 和 savon 的 SOAP 服务 - 2

    我正在尝试使用ruby​​和Savon来使用网络服务。测试服务为http://www.webservicex.net/WS/WSDetails.aspx?WSID=9&CATID=2require'rubygems'require'savon'client=Savon::Client.new"http://www.webservicex.net/stockquote.asmx?WSDL"client.get_quotedo|soap|soap.body={:symbol=>"AAPL"}end返回SOAP异常。检查soap信封，在我看来soap请求没有正确的命名空间。任何人都可以建议我

  8. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  9. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  10. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

随机推荐