SVG
Schriftarten erstellen

Einführung

Bemerkungen

eine einfache Schrift

Ein einfaches Beispiel für eine Svg-Schrift. Ein paar Dinge, die Sie hier beachten sollten:

• Das Koordinatensystem der Glyphen steht im Gegensatz zu dem in svg üblichen Koordinatensystem. Die y-Achse zeigt nach oben . Der Punkt 0,0 befindet sich in der rechten unteren Ecke.
• Alle Pfade in einer Schriftart müssen gegen den Uhrzeigersinn gezeichnet werden.
• In den meisten Werkzeugen wird nur das d-Attribut des Glyph-Elements unterstützt. Untergeordnete Elemente funktionieren nicht, obwohl sie technisch zulässig sind.

<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>

Wenn Sie breitere oder engere Glyphen haben, ändern Sie einfach horiz-adv-x am Glyphenelement selbst.

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

Auswahl von Schriftarten

Die Unicode-Eigenschaft wird für die spätere Auswahl von Glyphen verwendet. Sie können einfache Buchstaben oder Unicode-Codepunkte sowie Ligaturen (Kombination aus Buchstaben oder Unicode-Codepunkten) verwenden.

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

Glyphen werden immer nach dem ersten Treffer ausgewählt, so dass alle Ligaturen vor einem einzelnen Zeichen stehen.

Unicode-Codepunkte können in Dezimalzahlen geschrieben werden { oder in hexadezimaler Schreibweise &#x1f .

Aufstieg, Abstieg und Grundlinie

Die units-per-em -Eigenschaft ist eine der wichtigsten Eigenschaften der Schriftart. Es wird verwendet, um jedem Wert einer anderen Eigenschaft eine Bedeutung zu geben.

Die CSS2-Schriftartenspezifikation hat eine schöne Definition des em sqare :

Bestimmte Werte, wie Breitenmesswerte, werden in Einheiten ausgedrückt, die sich auf ein abstraktes Quadrat beziehen, dessen Höhe der beabsichtigte Abstand zwischen Zeilen des Typs in derselben Typgröße ist

Die Standardbasislinie ist 0 im em-Quadrat. Für die Berechnung der Linienhöhe und für die Ausrichtung sind die beiden Eigenschaften Aufstieg und Abstieg von größter Bedeutung.

Der Aufstieg ist die maximale Entfernung von der Basislinie zum höchsten Punkt Ihrer größten Glyphe. Normalerweise ist das 1em, also der Wert, den Sie für units-per-em angegeben haben.

Der Abstieg ist die maximale Entfernung von der Grundlinie bis zum niedrigsten Punkt in einer Glyphe Ihrer Schrift.

Hier ist eine Schrift mit Glyphen, die eine Linie am tiefsten und höchsten Punkt sowie an der Grundlinie darstellt.

<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>

Aufstieg und Abstieg werden zur Bestimmung der Zeilenhöhe verwendet. Units-per-em und Basislinie werden verwendet, um die Position und Größe relativ zu den anderen verwendeten Schriftarten zu bestimmen.