字体表绘制的理解

news2024/9/17 8:53:11

下载字体到项目根目录下，我们通过一些在写预览本地字体的网站，简单看一下

通过图片不难看出阴书与原文的对应关系，接下来通过程序去完成这一过程，通过 fonttools
处理 ttf，然后获取字体和文字对应的 xml 文件

下面简单地说明一下这个 xml 文件，这个文件节点有很多，但是重点有两部分：

<GlyphOrder>
    <!-- The 'id' attribute is only for humans; it is ignored when parsed. -->
    <GlyphID id="0" name="glyph00000"/>
    <GlyphID id="1" name="x"/>
    <GlyphID id="2" name="unie31f"/>
    <GlyphID id="3" name="unie4dd"/>
  ...
</GlyphOrder>

GlyphOrder 节点下为该字体文件中所包含的文字

<TTGlyph name="unie01f" xMin="0" yMin="-98" xMax="961" yMax="818">
      <contour>
        <pt x="260" y="417" on="1"/>
        <pt x="296" y="365" on="0"/>
        <pt x="349" y="278" on="1"/>
    ...
      </contour>
    <contour>
    <pt x="364" y="301" on="1"/>
        <pt x="391" y="265" on="1"/>
        <pt x="555" y="328" on="0"/>
    ...
      </contour>
    ...
</TTGlyph>

TTGlyph 节点下，name为所绘制的文字，contour节点为字型信息,还有一些坐标,这些坐标意味着什么呢？看一下 1 对应的 name：

接下来让我们提取 「1」 在这个字体中对应的 name 的坐标

<TTGlyph name="unie31f" xMin="0" yMin="0" xMax="361" yMax="714">
      <contour>
        <pt x="297" y="714" on="1"/>
        <pt x="262" y="674" on="0"/>
        <pt x="160" y="612" on="0"/>
        <pt x="111" y="598" on="1"/>
        <pt x="111" y="516" on="1"/>
        <pt x="212" y="546" on="0"/>
        <pt x="279" y="614" on="1"/>
        <pt x="279" y="0" on="1"/>
        <pt x="361" y="0" on="1"/>
        <pt x="361" y="714" on="1"/>
      </contour>
      <instructions/>
    </TTGlyph>

这里on表示控制端点是否在曲线上的命令，在字体绘制里面，只有贝塞尔曲线的控制点不在曲线上，如果on=0，说明点在不在曲线上，如果on=1，说明点在曲线上。因此这里（297,714）on=1，（262,674）on=0，（160,612）on=0，（111,598）on=1,说明（297,714）和（111,598）分别为起点和终点，（262,674）和（160,612）为控制点的三次贝塞尔曲线，然后（111， 516）on=1，表示绘制（111,598）到（111， 516）的直线。

接下来我们将这些坐标连线，用程序将它图形化：