Einfache Formatierungen von Schriften

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Wesentlich für das Aussehen eines Textes sind die Schrifteigenschaften. Sie können sie mit den folgenden Eigenschaften im style-Attribut eines <text>-Tags anpassen:

• font-family legt die Schriftart fest. Bspw. können Sie font-family:Arial verwenden, um Arial als Schriftart zu definieren. Wenn Sie diese Eigenschaft nicht festlegen, wird die Standardschrift des Browsers bzw. SVG-Plug-Ins verwendet.
• font-size bestimmt die Schriftgröße. Mit font-size:10 erreichen Sie bspw. eine Schriftgröße von 10 Pixeln.
• font-weight, legt fest, wie fett die Schrift dargestellt wird. Verfügbar sind die Werte normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 und inherit. Eine normale, fette Schrift erzielen Sie bspw. mit font-weight:bold.
• font-stretch legt die Ausdehnung der Schrift fest. Unterstützt werden die Werte normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded und inherit.
• font-variant bestimmt, ob die Kleinbuchstaben in verkleinerten Großbuchstaben oder normal angezeigt werden sollen. Diese Einstellung wird vom SVG-Viewer jedoch nur für spezielle SVG-Schriften unterstützt.
• font-style legt fest, ob der Text normal oder kursiv dargestellt werden soll. Mögliche Werte sind normal, italic, oblique und inherit. Die Unterschiede zwischen italic und oblique sind jedoch so minimal, dass sie nicht sichtbar sind, es sei denn, Sie verwenden im SVG-Viewer die nicht optimierte Ansicht.

Die folgende Abbildung zeigt Auswirkungen der einzelnen Einstellungen im SVG-Viewer 2.0.

Abbildung: Formatierungen für Schriftarten.

   

<< zurück

vor >>