|
Mit Hilfe des font-face-Element können Sie SVG fonts
referenzieren, die in einem externen SVG Dokument festgelegt wurden. In diesem Fall
muß dem Eltern-Element font im externen Dokument durch das Attribut
id ein eindeutiger Name zugeordnet werden - wie im folgenden Beispiel.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<font id="ente" horiz-adv-x="54" >
<font-face
font-family="Entebbe"
units-per-em="1000"
panose-1="0 0 0 0 0 0 0 0 0 0"
ascent="935"
descent="-292"
alphabetic="0">
</font-face>
<missing-glyph horiz-adv-x="800"
d="M50 0V800H750V0H50ZM700 50V750H100V50H700Z" />
<glyph unicode=" " glyph-name="space" horiz-adv-x="290" />
<glyph unicode="!" glyph-name="exclam" horiz-adv-x="223"
d="M86 171L83 197V683Q83 719 96 725T117 731Q141 731 145 709L148 683
V197Q148 161 135 155T114 149Q90 149 86 171ZM76 4Q61 19 61 40Q61 62 75 76
T112 91Q119 91 140 83T162 41Q162 30 159 22T144 2T111 -10Q92 -10 76 4Z" />
<!-- ... -->
<!-- ... mehr Zeichendefinitionen folgen hier -->
<!-- ... -->
</font>
</defs>
</svg>
Wenn Sie einen externen SVG font in einem anderen SVG Dokument verwenden wollen,
platzieren Sie das font-face-Element direkt
im defs-Bereich eines
SVG Dokuments.
Es wird kein font-Element als
Eltern-Element benötigt.
Das font-face-Element muß, selbst wenn es einen externen
SVG Font referenziert, mindestens das Attribut
font-family enthalten,
das den gleichen Wert erhält, wie das font-family Attribut im
externen font-face-Element.
Die Referenzierung des externen Fonts können Sie dann durch die folgenden
Elemente, die im font-face-Bereich platziert werden müssen,
und deren Attribute realisieren:
-
Im Element font-face-name geben Sie
mit dem Attribut name den Namen der
Schriftart an (der Wert aus font-family).
-
Im Element
font-face-src
geben Sie mit dem Attribut xlink:href die URL zum externen
SVG font an (in Form dateiname#font-id).
Dieses
Element entspricht dem Deskriptor src im der CSS 2 @font-face Regel.
-
Im Element font-face-format, einem
Kind-Element von font-face-src,
können Sie mit dem Attribut string
das Format des referenzierten Fonts angeben (in unserem Falle natürlich
svg).
.. und nun das SVG Dokument, das den, im vorangegangenen Beispiel definierten,
SVG font mit Hilfe des font-face-Elements referenziert:
Dieses Beispiel funktioniert leider bis dato nur
im Batik-Squiggle SVG Browser :-) und noch nicht im Adobe SVG Viewer :-(.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<font-face font-family="Entebbe">
<font-face-src>
<font-face-name name="Entebbe" />
<font-face-uri xlink:href="kap17_3.svg#ente">
<font-face-format string="svg" />
</font-face-uri>
</font-face-src>
</font-face>
</defs>
<text x="20" y="60"
style="font-family:Entebbe;font-size:50px;font-weight:bold;">
externe !SVG fonts!
<tspan x="20" dy="25" style="font-size:14px;">
.. wird vom Adobe SVG Viewer noch nicht unterstützt.
</tspan>
<tspan x="20" dy="20" style="font-size:14px;">
.. aber vom Batik-Squiggle.
</tspan>
</text>
</svg>
Es ist in SVG ebenfalls möglich, mit Hilfe der CSS @font-face Regel innerhalb eines
style-Bereichs externe SVG fonts zu
referenzieren. Auch in diesem Fall
muß dem Eltern-Element font im externen Dokument durch das Attribut
id ein eindeutiger Name zugeordnet werden.
Leider funktioniert dieses Feature weder im Adobe SVG Viewer noch im
Batik-Squiggle SVG Browser.
Nichtsdestotrotz folgt ein Beispiel - das leider nicht funktioniert :-(.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
<![CDATA[
@font-face {
font-family: 'Entebbe';
src: url('kap17_3.svg#ente') format(svg);
}
]]>
</style>
</defs>
<text x="20" y="60"
style="font-family:Entebbe;font-size:50px;font-weight:bold;">
externe !SVG fonts!
<tspan x="20" dy="20" style="font-size:14px;">
.. wird noch nicht unterstützt.
</tspan>
</text>
</svg>
| 
