SVG
フォントの作成

前書き

備考

シンプルなフォント

svgフォントの簡単な例。ここで注意すべき点がいくつかあります。

• グリフの座標系はsvgの通常の座標系とは反対になります。 y軸は上向きです。ポイント0,0は右下隅にあります。
• フォント内のすべてのパスは反時計回りに描画する必要があります。
• ほとんどのツールでは、グリフ要素のd属性のみがサポートされています。子要素は機能しませんが、技術的に許可されます。

<svg xmlns="http://www.w3.org/2000/svg">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode="a" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
    <glyph unicode="b" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />
  </font>
</svg>

より広いまたはより狭いグリフがある場合は、グリフ要素自体のhoriz-adv-xを変更するだけです。

<glyph unicode="a" horiz-adv-x="512" d="M0 0 H1000 L500 1000z M200 200 L500 800 L800 200z" />

フォントピッキング

unicodeプロパティは後でグリフを選択するために使用されます。シンプルな文字またはUnicodeコードポイント、および合字（文字またはUnicodeコードポイントの組み合わせ）を使用できます。

• unicode="abc"
• unicode="ab"
• unicode="abab"
• unicode="a"
• unicode="b"

グリフは常に最初のマッチで選択されるので、すべての文字が単一の文字の前にあるようにしてください。

ユニコードのコードポイントは10進数で書くことができます{または16進数で&#x1f表記。

上昇、下降、ベースライン

units-per-emプロパティは最も重要なフォントプロパティの1つです。これは、他のプロパティの任意の値に意味を与えるために使用されます。

CSS2のフォント仕様にはem sqareという素晴らしい定義があります ：

幅メトリックなどの特定の値は、同じタイプのサイズの行間の意図された距離を高さとする抽象的な正方形を基準にした単位で表されます

デフォルトのベースラインは emの正方形で0になります。行高計算と整列の目的で、2つの特性が上昇と下降が最も重要です。

Ascentは、ベースラインから最大グリフの最高点までの最大距離です。これは通常1emなので、em単位の値です。

下降は、ベースラインからフォントのグリフの最下点までの最大距離です。

グリフ付きのフォントは、最も低い点と最も高い点、そしてベースラインで線を描画します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <font id = "myFont"
        horiz-adv-x   = "1000"
        vert-origin-x = "0"
        vert-origin-y = "0" >
    <font-face font-family  = "myFont"
               font-weight  = "normal"
               units-per-em = "1000"
               descent="500"
               ascent="1000">
      <font-face-src>
        <font-face-name name="myFont"/>
      </font-face-src>
    </font-face>`
    <glyph unicode = "a" d = "M0 900h1000v100h-1000z" />
    <glyph unicode = "b" d = "M0 0h1000v100h-1000z" />
    <glyph unicode = "c" d = "M0 -500h1000v100h-1000z" />
  </font>
</svg>

ラインハイトの決定には、上昇と下降が使用されます。 Units-per-emとbaselineは、使用される他のフォントとの相対的な位置とサイズを決定するために使用されます。