CSS Schrift Generator - Website X5 Helpsite

Mit dem Schrift Generator lassen sich sehr einfach die wichtigsten CSS-Anweisungen zur Schriftformatierung erzeugen. Darüber hinaus können durch die zweigeteilte Oberfläche zwei Schriften sehr gut miteinander vergleichen werden. Durch die direkte Gegenüberstellung können so nicht nur die Lesbarkeit sondern auch mögliche kleine Abweichungen in Größe und Darstellung erkannt werden.
Alle Formulareingaben werden über Auswahllisten vordefiniert übergeben. Farb- und Größenangaben lassen sich außerdem noch von Hand eingeben. So ist es zum Beispiel möglich, eigene Farbwerte zu nutzen oder für die Größenangaben anstelle der vordefinierten Werte weitere numerischen Angaben oder auch statt der Punkt-Angaben "pt" alle weiteren zugelassenen Einheiten zu verwenden. Die Auswahlen werden umgehen angewendet und Handeingaben nach einem Klick auf den zugehörigen "OK"-Button, das Ergebnis kann also sofort an einem kleinen Beispieltext betrachtet werden. Bei der Auswahl von Schriftarten ist zu beachten, dass Schriften, die auf dem Computer des Users nicht installiert sind, auch nicht angezeigt werden. Ist keine Alternative angegeben oder verfügbar (auch nicht in einer hirachisch höher stehenden CSS-Anweisung), stellt der Browser den Text in der Standardschriftart dar. Allerdings existieren einige Schriftarten, die auf nahezu jedem Computer verfügbar sind (sichere Schriftarten) und mit einer sehr hohen Wahrscheinlichkeit keine Probleme bei der Anzeige bereiten. Alternativ kann dem Browser mittels Schriftfamilie die Wahl einer Schriftart überlassen werden, die zumindest vom Typ her der gewünschten entspricht.
Hinweis: Nicht installierte Schriftarten werden hier im Generator in Tahoma dargestellt)

Mit dem "CSS Code erstellen"-Button werden die zugehörigen CSS-Anweisungen generiert. Referenziert wird im Schrift-Generator grundsätzlich auf den body-Tag. Natürlich können die CSS-Anweisungen auch auf andere Tags, CSS-Klassen oder IDs angewendet werden. Der "löschen"-Button setzt den jeweiligen Teil des Generators in den Ausgangszustand zurück. Bei einem Reload der Seite wird der gesamte Generator zurückgesetzt.

Auf Grund der Darstellungsprobleme, die nicht installierte Schriften beim User verursachen können, empfiehlt es sich, zusätzlich mindestens eine ähnliche aber sichere Schriftart oder eine Schriftfamilie zu definieren. Dies kann sehr einfach realisiert werden, denn es können mehrere Schriftarten und Familien mittels font-family über Komma getrennt angegeben werden. Der Browser versucht dann die erstgenannte Schriftart darzustellen und wählt erst, wenn diese nicht verfügbar ist, die nächste usw.
Beispiel: font-family: Constantia,Arial,sans-serif;.
Es bietet sich an, als letzte Angabe eine Schriftfamilie zu wählen, die vom Typ her der gewünschten Schriftart entspricht.

Der in den Ausgabebox bereitgestellte CSS-Code kann direkt in den Head-Bereich der Seite eingebaut werden. Empfohlen wird allerding die CSS-Anweisungen in eine externe Datei auszulagern und diese dann in alle betreffende Webseiten zu integrieren. Bei Änderungen muß dann nur eine Datei und nicht jede Seite bearbeitet werden.

Dazu werden die CSS-Anweisungen in einer separaten Textdatei kopiert und sinnvollerweise mit der Endung .css abgespeichert. Die Tags zum Aufruf in der Seite, <style type="text/css"> und </style> entfallen dabei. Hier mal ein Beispiel:

Der Aufruf in jeder Seite erfolgt über (im HEAD-Bereich) :
<link rel="stylesheet" type="text/css" href="Datei.css">

Anstelle von Datei.css ist der Name der CSS-Datei anzugeben. Wenn sich die CSS-Datei in einem anderen Verzeichnis oder auf einem anderen Server befindet, muß an dieser Stelle zusätzlich eine Pfadangabe oder absolute URL eingetragen werden.