Außer dem Attribut fill,
welches zur Attributgruppe PresentationAttributes-FillStroke gehört,
sind alle weiteren Attribute dieses
Kapitels in der Attributgruppe
PresentationAttributes-FontSpecification zu finden.
- Schriftfarbe - fill
- Schriftart - font-family
- Schriftgröße - font-size
- Schriftdicke - font-weight
- Schriftstil - font-style
- Schriftausdehnung - font-stretch
- Schriftvariation - font-variant
fill
Voreinstellung: black.
Die Schriftfarbe wird mit Eigenschaft oder dem Attribut fill
zugewiesen. Diese Attribut gehört zur Attributgruppe
PresentationAttributes-FillStroke.
Mögliche Werte sind Farbangaben in hexadezimaler Schreibweise, durch ein festgelegtes Farbwort oder in
dezimaler Schreibweise, z.B.:
<tspan style="fill:#ff0000;"> ... roter text ... </tspan>
<tspan style="fill:red;"> ... roter text ... </tspan>
<tspan style="fill:rgb(255,0,0);"> ... roter text ... </tspan>
Alle drei Beispiele erzeugen eine rote Schrift.
(siehe auch Kapitel Painting, dort werden alle
Attribut der Attributgruppe PresentationAttributes-FillStroke
vorgestellt).
font-family
Voreinstellung: vom User agent abhängig.
Eine Schriftart können sie mit dem Attribut oder der Eigenschaft
font-family festlegen.
Dabei ist es möglich, mehrere Schriftarten, durch Komma getrennt, hintereinander anzugeben.
Falls die zuerst angegebenen Schriftart auf dem System des Clients bzw. Users nicht dargestellt werden
kann, versucht der Browser es mit der nächsten angegbenen Schriftart, usw.
Wenn die Bezeichnung einer Schriftart Leerzeichen enthält, müssen Sie diese in einfache Hochkommatas
einschließen, z.B.:
<tspan style="font-family:'Courier New',Verdana,sans-serif;"> ... text ... </tspan>
font-size
Voreinstellung: medium.
Mit Hilfe des Attributs oder der Eigenschaft
font-size legen Sie die Schriftgröße fest.
font-size erwartet eine Größenangabe oder ein festgelegtes
Schlüsselwort als Wertzuweisung.
Schriften werden meist in den Maßen Pixel oder Punkt angegeben, z.B:
<tspan style="font-size:12px;"> ... 12 Pixel text ... </tspan>
<tspan style="font-size:16pt;"> ... 16 Punkt text ... </tspan>
font-weight
Voreinstellung: normal.
Die Schriftdicke oder das Schriftgewicht können Sie mit dem Attribut oder der Eigenschaft
font-weight einstellen.
Die wichtigsten, möglichen Werte für font-weight sind
-
normal - keine Formatierung und
-
bold - erzeugt fette Schrift.
Es sind ebenfalls noch die Werte bolder (noch fetter) und
lighter (nicht ganz so fett) möglich.
Und weiterhin können Sie mit den Zahlen
100,
200,
300,
400,
500,
600,
700,
800 und
900 als
Wertzuweisung für
font-weight insgesamt 9 verschieden "Fett-Abstufungen"
erzeugen - wenn der Browser das mitmacht ...
Dabei entspricht der Wert normal dem Wert 500.
font-style
Voreinstellung: normal.
Den Schriftstil, also kursive Schrift, bestimmen Sie mit dem Attribut oder der Eigenschaft
font-style.
Die Werte italic und
oblique erzeugen am Bildschirm nicht unterscheidbare kursive Schriftzeichen,
mit dem Wert normal findet keine Formatierung statt.
<tspan style="font-style:oblique;"> ... kursiver text ... </tspan>
font-stretch
Voreinstellung: normal.
Mit Schriftausdehnung kann der Abstand der Zeichen zueinander verändert werden. Möglich macht dieses
das Attribut oder die Eigenschaft font-stretch.
Sie können den Zeichen also eine "Stretching" verordnen :-).
Folgende Werte werden von font-stretch akzeptiert:
- normal
- wider
- narrower
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
Experimentieren Sie einfach ein wenig mit den verschieden Wertzuweisungen.
font-variant
Voreinstellung: normal.
Dieses Attribut akzeptiert 2 Werte: normal und
small-caps.
Bei Verwendung von small-caps wird der Text als
Kapitälchen (kleine Großbuchstaben) dargestellt. Der SVG-Viewer von Adobe
unterstützt dieses Attribut noch nicht.
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="400" height="210">
<title>Schriftformatierung</title>
<desc>
Farbe, Art, Größe, Dicke, Stil, Ausdehnung und Variation von Text
</desc>
<text x="40" y="20">
<!-- Schriftfarbe -->
<tspan fill="blue">Schriftfarbe</tspan>
<tspan x="200" style="fill:blue;">Schriftfarbe</tspan>
<!-- Schriftart -->
<tspan x="40" y="40" font-family="Times">
Schriftart
</tspan>
<tspan x="200" y="40" style="font-family:Times">
Schriftart
</tspan>
<!-- Schriftgröße -->
<tspan x="40" y="60" font-size="26px">
Schriftgröße
</tspan>
<tspan x="200" y="60" style="font-size:26px">
Schriftgröße
</tspan>
<!-- Schriftdicke -->
<tspan x="40" y="80" font-weight="bold">
Schriftdicke
</tspan>
<tspan x="200" y="80" style="font-weight:bold;">
Schriftdicke
</tspan>
<!-- Schriftstil -->
<tspan x="40" y="100" font-style="italic">
Schriftstil
</tspan>
<tspan x="200" y="100" style="font-style:italic;">
Schriftstil
</tspan>
<!-- Schriftausdehnung -->
<tspan x="40" y="120" font-stretch="extra-expanded">
Schriftausdehnung
</tspan>
<tspan x="200" y="120" style="font-stretch:extra-expanded;">
Schriftausdehnung
</tspan>
<!-- Schriftvariation -->
<tspan x="40" y="140" font-variant="small-caps">
Schriftvariation
</tspan>
<tspan x="200" y="140" style="font-variant:small-caps;">
Schriftvariation
</tspan>
</text>
<text x="10" y="170"
style="font-family:Verdana; font-size:14px;">
Klicken Sie mit der rechten Maustaste in die Grafik
<tspan x="20" dy="20">und wählen Sie
<tspan dx="20" dy="7"
style="font-size:28px; fill:yellow;
stroke:black; stroke-width:.5px;">
"Einzoomen"
</tspan>
</tspan>
</text>
</svg>
|