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
|
---
title: SVG-Schriftarten
slug: Web/SVG/Tutorial/SVG_Schriftarten
translation_of: Web/SVG/Tutorial/SVG_fonts
---
<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
<p>Als SVG spezifiziert wurde, war die Unterstützung für Web-Schriftarten in Browsern noch nicht sehr verbreitet. Weil ein Zugriff auf die richtige Schriftart für das korrekte Rendern jedoch so wichtig ist, wurde SVG eine Technologie zur Beschreibung von Schriftarten hinzugefügt, um dies zu ermöglichen. Dabei war eine Kompatibilität mit anderen Formaten wie PostScript oder OTF nicht vorgesehen, sondern vielmehr als ein einfaches Mittel, um Informationen über Zeichen fürs Rendern in SVG einbetten zu können.</p>
<p><strong>SVG-Schriftarten werden gegenwärtig nur durch Safari und Android-Browser unterstützt. </strong></p>
<p>
</p><div class="note">Im Internet Explorer <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx">wurde eine Implementierung nicht berücksichtigt</a>, in <a href="https://www.chromestatus.com/feature/5930075908210688">Chrome 38 wurde sie entfernt</a> (auch in Opera 25) und Firefox hat es auf <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490" title="https://bugzilla.mozilla.org/show_bug.cgi?id=119490">unbestimmte Zeit verschoben</a>, um sich auf <a href="/en/WOFF" title="en/About WOFF">WOFF</a> konzentrieren zu können. Andere Tools jedoch wie <a class="external" href="http://www.adobe.com/svg/viewer/install/" title="http://www.adobe.com/svg/viewer/install/">Adobe SVG Viewer</a>-Plugin, Batik und Teile von Inkscape unterstützen das Einbetten von SVG-Schriftarten.</div>
<p></p>
<p>Das grundlegende Tag zur Definition einer SVG-Schriftart ist {{ SVGElement("font") }}.</p>
<h2 id="Eine_Schriftart_definieren">Eine Schriftart definieren</h2>
<p>Es sind einige Angaben nötig, um eine Schriftart in SVG einzubetten. Gezeigt wird das Beispiel <a class="external" href="http://www.w3.org/TR/SVG/fonts.html#FontElement" title="http://www.w3.org/TR/SVG/fonts.html#FontElement">aus der Spezifikation</a> und an ihm werden die Details erklärt.</p>
<pre><font id="Font1" horiz-adv-x="1000">
<font-face font-family="Super Sans" font-weight="bold" font-style="normal"
units-per-em="1000" cap-height="600" x-height="400"
ascent="700" descent="300"
alphabetic="0" mathematical="350" ideographic="400" hanging="500">
<font-face-src>
<font-face-name name="Super Sans Bold"/>
</font-face-src>
</font-face>
<missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
<glyph unicode="!" horiz-adv-x="300"><!-- Umrisslinie von ! --></glyph>
<glyph unicode="@"><!-- Umrisslinie von @ --></glyph>
<!-- weitere Zeichen -->
</font>
</pre>
<p>Am Anfang steht das {{ SVGElement("font") }}-Tag. Es enthält das Attribut <code>id</code>, das einen späteren Zugriff (Referenzierung) mittels URI (siehe unten) ermöglicht. Das Attribut <code>horiz-adv-x</code> legt fest, wie breit ein Zeichen durchschnittlich verglichen zur path-Definition eines einzelnen Zeichens ist. Der Wert <code>1000</code> legt einen vernünftigen Wert fest, um damit zu arbeiten. Es gibt weitere Attribute, die helfen, den Kasten näher zu definieren, in dem das Zeichen erstellt werden soll.</p>
<p>Das {{ SVGElement("font-face") }}-Tag ist das SVG-Gegenstück zu CSS <a href="/en/CSS/@font-face" title="en/css/@font-face"><code>@font-face</code></a>. Darin werden Grundeinstellungen der fertigen Schriftart wie Schriftstärke, Stil usw. definiert. Im obigen Beispiel ist das erste und wichtigste Attribut <code>font-family</code>, sein Wert (im Beispiel "Super Sans") ermöglicht in CSS und in SVG mittels <code>font-family</code> den Zugriff auf die Schriftart. Die Attribute <code>font-weight</code> und <code>font-style</code> erledigen dieselben Aufgaben wie ihre Gegenstücke in CSS. Alle folgenden Attribute sind Rendering-Anweisungen für die Schriftart-Layout-Maschine, zum Beispiel, wie viele Zeichen Gesamthöhen haben, die über der Höhe des Kleinbuchstabens x liegen.</p>
<p>Das Kind-Tag {{ SVGElement("font-face-src") }} entspricht dem <code>src</code>-Descriptor bei <code>@font-face</code> in CSS. Mittels der Kinder-Tags {{ SVGElement("font-face-name") }} und {{ SVGElement("font-face-uri") }} können auf externe Quellen verwiesen werden. Am obigen Beispiel gezeigt: Wenn dem Renderer lokal eine Schriftart namens "Super Sans Bold" verfügbar ist, soll er diese stattdessen benutzen.</p>
<p>Das {{ SVGElement("missing-glyph") }}-Tag wird benutzt, um ein Zeichen zu definieren, das angezeigt wird, falls in der Schriftart kein Zeichen an dieser Stelle definiert wurde und auch kein Ausweichmechanismus zur Verfügung steht. Am Beispiel der Definition des Missing-Glyph (im obigen Beispiel) kann gezeigt werden, wie Zeichen gemacht werden: Einfach irgendeine beliebige SVG-Form oder -Pfad einfügen. </p>
<p>Auch andere SVG-Tags können hier benutzt werden, zum Beispiel {{ SVGElement("filter") }}, {{ SVGElement("a") }} oder {{ SVGElement("script") }}. Für einfache Zeichen aber kann ein Attribut <code>d</code> hinzugefügt werden. Es definiert den Umriss des Zeichens genau so, wie es beim <code>path</code>-Tag geschieht.</p>
<p>Ein beliebiges Zeichen wird schließlich mit {{ SVGElement("glyph") }} definiert. Das wichtigste Attribut dabei ist <code>unicode</code>. Es legt den Unicode-Codepoint fest, also ob das definierte Zeichen zum Beispiel anstelle des Buchstabens "F" stehen soll. Wird das Attribut {{htmlattrxref("lang")}} eingesetzt, kann die Verwendung auf eine bestimmte Sprache eingeschränkt werden (abhängig von der Angabe bei <code>xml:lang</code>). Und noch mal, es kann beliebiges SVG genutzt werden, um ein Zeichen zu definieren, was den, der die Schriftart nutzt, sehr unstützt.</p>
<p>Die Tags {{ SVGElement("hkern") }} und {{ SVGElement("vkern") }} können in <code>font</code> eingesetzt werden. Beide benötigen die Attribute <code>u1</code> und <code>u2</code> und das Attribut <code>k</code>, mit dessen Hilfe der Abstand zwischen u1 und u2 individuell verringert werden kann. Das folgende Beispiel rückt "A" und "V" näher zusammen, als es der Standardabstand eigentlich vorsieht.</p>
<pre><hkern u1="A" u2="V" k="20" />
</pre>
<h2 id="Auf_eine_Schriftart_zugreifen">Auf eine Schriftart zugreifen</h2>
<p>Wenn die Schriftart fertig ist, kann im {{ SVGElement("text") }}-Tag mit dem Attribut <code>font-family</code> auf sie zugegriffen werden:</p>
<pre><font>
<font-face font-family="Super Sans" />
<!-- und so weiter -->
</font>
<text font-family="Super Sans">Mein Text benutzt Super Sans</text>
</pre>
<p>Die Kombination des Attributs mit anderen Tags ermöglicht, die Schriftart an beliebiger Stelle definieren zu können.</p>
<h3 id="Option_CSS_font-face_benutzen">Option: CSS @font-face benutzen</h3>
<p><code>@font-face</code> kann benutzt werden, um Zugriff auf externe (und auch nicht-externe) Schriftarten zu bekommen:</p>
<pre><font id="Super_Sans">
<!-- und so weiter -->
</font>
<style type="text/css">
@font-face {
font-family: "Super Sans";
src: url(#Super_Sans);
}
</style>
<text font-family="Super Sans">Mein Text benutzt Super Sans</text></pre>
<h3 id="Option_Zugriff_auf_eine_externe_Schriftart">Option: Zugriff auf eine externe Schriftart</h3>
<p>Das oben erwähnte <code>font-face-uri</code>-Tag ermöglicht den Zugriff auf externe Schriftarten, was eine noch weitere Wiederverwendbarkeit ermöglicht:</p>
<pre><font>
<font-face font-family="Super Sans">
<font-face-src>
<font-face-uri xlink:href="fonts.svg#Super_Sans" />
</font-face-src>
</font-face>
</font>
</pre>
<p>{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}</p>
|
