Schriftart, Dialogfeld "Stil-Generator"

Artikel
09/03/2008

Aktualisiert: November 2007

Mithilfe der Seite Schriftart des Dialogfelds Stil-Generator können Sie Schriftartattribute für Cascading Stylesheets (CSS) definieren. Sie können diese Attribute entweder direkt HTML-Elementen zuweisen oder sie zu den CSS-Formatierungsregeln hinzufügen.

So wenden Sie Schriftartattribute direkt auf Text in HTML-Elementen auf der Seite an

Öffnen Sie das HTML-Dokument in der Entwurfsansicht des HTML-Designer, und wählen Sie den zu formatierenden Text aus.
Klicken Sie zum Öffnen des Dialogfelds Stil-Generator im Menü Format auf die Option Stil.
Wählen Sie im linken Bereich des Dialogfelds Stil-Generator die Option Schriftart aus.

Das Dialogfeld Schriftart, Stil-Generator wird im rechten Bereich angezeigt.

Wenn Sie Schriftartformate einem in der Entwurfsansicht ausgewählten Text zuweisen, werden Formatattribute inline in das HTML-Markup für die Seite eingefügt. Wechseln Sie zur HTML-Ansicht, um die neu eingefügten Stilattribute zu überprüfen.

So fügen Sie einer in einem externen Stylesheet definierten CSS-Stilregel Schriftartattribute hinzu

Öffnen Sie ein vorhandenes externes Stylesheet, und platzieren Sie die Einfügemarke zwischen die geschweiften Klammern ({ }) hinter der Auswahl für den gewünschten Stil.
Klicken Sie zum Öffnen des Dialogfelds Stil-Generator im Menü Stile auf die Option Stil erstellen.
Klicken Sie im linken Bereich des Dialogfelds Stil-Generator auf die Option Schriftart.

Das Dialogfeld Schriftart, Stil-Generator wird im rechten Bereich angezeigt.

Hinweis:
Das Menü Stile wird angezeigt, wenn Sie ein externes CSS-Stylesheet zum Bearbeiten öffnen. Wenn Sie die Einfügemarke zwischen die geschweiften Klammern hinter der Auswahl für eine Stilregel platzieren, wird im Menü Stile die Option Stil erstellen angezeigt.

Eine in einem externen Stylesheet definierte CSS-Stilklasse kann auf ein Element im <BODY>-Element einer Webseite (in diesem Fall auch auf das <BODY>-Element selbst) angewendet werden, indem Sie die CSS-Stilauswahl als CLASS-Eigenschaft für das Element zuweisen.

Die folgenden Optionen stehen im Dialogfeld Stil-Generator auf der Seite Schriftart zur Verfügung.

Aufgaben

UI-Elemente

Schriftartname

Familie
Bietet eine Auswahlliste mit Schriftarten für Text, der in dieser Formatvorlage angezeigt wird. Wenn Sie Dokumente für das Internet entwerfen, wählen Sie weit verbreitete Schriftarten aus. Das Internet wird von einem großem Publikum genutzt, und die Bandbreite der installierten Schriftarten kann von Benutzer zu Benutzer verschieden sein. Wenn Sie Familie auswählen, können Sie durch Klicken auf die Schaltfläche mit den Auslassungszeichen (...) das Dialogfeld Schriftauswahl öffnen und darin Schriftarten auswählen. Weitere Informationen erhalten Sie unter Dialogfeld "Schriftauswahl". In der Regel werden mehrere Schriftarten zur Auswahl aufgeführt. Sie können z. B. unter Schriftauswahl die Schrift Verdana (eine Windows-Systemschriftart für die Webanzeige) auswählen und anschließend manuell Arial, Helvetica (für Macintosh-Browser) und Sans-Serif (eine allgemeine Schriftart für Benutzer, die über keine der anderen aufgeführten Schriftarten verfügen) hinzufügen. Das CSS-Stilmarkup für FONT-FAMILY lautet in diesem Fall:

FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
Systemschriftart
Aktivieren Sie diese Option, damit der Stil eine bestimmte Systemschriftart übernimmt, die der Benutzer auf dem Computer definiert hat, auf dem die Seite angezeigt wird. Wenn Sie z. B. Fensterbeschriftung auswählen, verwendet der Webbrowser zum Anzeigen des in diesem Stil formatierten Texts die Schriftart, die für die Fensterbeschriftung auf dem betreffenden Computer festgelegt wurde. Die Fensterbeschriftung kann für einen Computer z. B. auf die Schriftart Times festgelegt sein, für einen anderen auf Verdana. Das CSS-Formatvorlagenmarkup, das der Systemschriftart Fensterbeschriftung zugewiesen ist, lautet beispielsweise:

FONT: caption

Schriftartattribute

Farbe
Legt die Farbe für Text fest, der in dieser Formatvorlage angezeigt wird. Farben können auf verschiedene Art angegeben werden:

Geben Sie den Namen einer Farbe ein.
Geben Sie einen gültigen RGB-Farbwert ein (#FF0000 steht z. B. für rot).
Wählen Sie in der Dropdownliste eine Option aus.
Klicken Sie auf die Schaltfläche mit den Auslassungszeichen (...), um das Dialogfeld Farbauswahl zu öffnen und weitere Farben auszuwählen.

Wenn Sie z. B. rot auswählen, wird das folgende CSS-Attribut-Wert-Paar eingefügt:

COLOR: red

Hinweis:
Wenn Sie eine Farbe nicht aus der Dropdownliste, sondern stattdessen im Dialogfeld Farbauswahl auswählen, wird anstelle des Farbnamens der hexadezimale RGB-Farbwert eingefügt. Wenn Sie z. B. im Dialogfeld Farbauswahl die Farbe rot auswählen, wird das folgende CSS-Attribut-Wert-Paar eingefügt: COLOR: #ff0000.

Kursiv
Legt das FONT-STYLE-Attribut für Text fest, der in diesem Stil angezeigt wird. Wählen Sie entweder <Nicht festgelegt> (keine Option ausgewählt), Normal (nicht kursiv) oder Kursiv aus. Wenn Sie z. B. Kursiv auswählen, wird das folgende CSS-Attribut-Wert-Paar eingefügt:

FONT-STYLE: italic

Hinweis:

Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt. Das Italics-Attribut kann nicht auf Systemschriftarten angewendet werden.
Kapitälchen
Legt das FONT-VARIANT-Attribut für Text fest, der in diesem Stil angezeigt wird. Wählen Sie entweder <Nicht festgelegt> (keine Option ausgewählt), Normal (keine Kapitälchen) oder Kapitälchen aus. Wenn Sie z. B. Kapitälchen auswählen, wird das folgende CSS-Markup eingefügt:

FONT-VARIANT: small-caps

Hinweis:

Das Small Caps-Attribut kann nicht auf Systemschriftarten angewendet werden. Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.

Hinweis:
Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt. Das Italics-Attribut kann nicht auf Systemschriftarten angewendet werden.

Hinweis:
Das Small Caps-Attribut kann nicht auf Systemschriftarten angewendet werden. Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.

Größe

Diese Option legt den Schriftgrad der im Stil verwendeten Schriftart auf eines von drei Attributen fest: Specific, Absolute oder Relative.

Hinweis:
Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt. Das Size-Attribut kann nicht auf Systemschriftarten angewendet werden.

Spezifisch
Legt einen bestimmten Schriftgrad für die Schriftart fest. In der nebenstehenden Dropdownliste werden Optionen für die Einheit angezeigt, z. B. px, pt (Standardwert), pc, mm, cm, in, em, ex und %. Wenn Sie z. B. den Wert 20 eingeben und die Standardmaßeinheit übernehmen, wird das folgende CSS-Markup eingefügt:

FONT-SIZE: 20pt

Hinweis:
Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt. Vermeiden Sie die Verwendung von Pixelmaßen (px), da ein in Pixel formatierter Text sehr viel kleiner ausgedruckt wird, als er angezeigt wird.

Absolut
Legt einen absoluten Schriftgrad für die Schriftart fest, der in einer Liste von Optionen ausgewählt werden kann. Wählen Sie eine der Optionen <Nicht festgelegt> (kein Wert angegeben), XX-Klein, X-Klein, Klein, Mittel, Groß, X-Groß oder XX-Groß aus. Wenn Sie z. B. X-Klein auswählen, wird das folgende CSS-Markup eingefügt:

FONT-SIZE: x-small

Hinweis:

Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.
Relativ
Legt einen relativen Schriftgrad für die Schriftart fest, der in einer Liste von Optionen ausgewählt werden kann. Der Schriftgrad ist relativ bezüglich des übergeordneten Elements im Cascading Style. Wenn das <BODY>-Element z. B. eine Größe von 8 Punkten hat und dem Text in einem <SPAN>-Element innerhalb des <BODY>-Elements der Stil Kleiner zugewiesen wurde, ist der <SPAN>-Text kleiner als 8 Punkte. Wählen Sie <Nicht festgelegt> (kein Wert angegeben), Kleiner oder Größer aus. Wenn Sie z. B. Größer auswählen, wird das folgende CSS-Markup eingefügt:

FONT-SIZE: larger

Hinweis:

Wenn das Attribut <Nicht festgelegt> lautet, wird dem Stil kein Code hinzugefügt.

Effekte

Diese Option legt vordefinierte Effekte für den Stil fest. Folgende Kontrollkästchen stehen zur Auswahl: Keine (keine Effekte), Unterstreichen, Durchgestrichen und Überstreichen.

Wenn Sie Keine aktivieren, sind keine Effekte verfügbar. Wenn Keine nicht aktiviert ist, können Sie eine beliebige Kombination der übrigen Effekte auswählen. Wenn Sie z. B. sowohl Unterstreichen als auch Durchgestrichen auswählen, wird das folgende CSS-Markup eingefügt:

TEXT-DECORATION: underline line-through

Fett

Diese Option legt das FONT-WEIGHT-Attribut entweder als absoluten oder als relativen Wert fest.

Absolut
Setzt den absoluten Attributwert für die Fettformatierung der Formatvorlage auf das Attribut für die Fettformatierung, das der Schriftart zugewiesen ist. Wählen Sie entweder <Nicht festgelegt> (keine Option ausgewählt), Normal (nicht fett) oder Fett aus. Wenn Sie z. B. Fett auswählen, wird das folgende CSS-Markup eingefügt:

FONT-WEIGHT: bold

Hinweis:

Das Absolute Bold -Attribut und das Relative Bold-Attribut können nicht auf Systemschriftarten angewendet werden.
Relativ
Setzt den relativen Attributwert für die Fettformatierung der Formatvorlage auf ein Attribut für die Fettformatierung, das entweder kleiner oder größer als der Standardwert für die Fettformatierung der Schriftart ist. Wählen Sie <Nicht festgelegt> (keine Option ausgewählt), Heller (schwächer als Standardfettformatierung) oder Fetter (stärker als Standardfettformatierung) aus. Das Lighter-Attribut und das Bolder-Attribut sind hinsichtlich der einzelnen Schriftarten relativ. Der Grad der Fettformatierung hängt daher von der gewählten Schriftart ab. Wenn Sie z. B. Fetter auswählen, wird das folgende CSS-Markup eingefügt:

FONT-WEIGHT: bolder

Hinweis:
Das Absolute Bold -Attribut und das Relative Bold-Attribut können nicht auf Systemschriftarten angewendet werden.

Großbuchstaben

Legt das TEXT-TRANSFORM-Attribut für den Stil fest. Wählen Sie <Nicht festgelegt> (keine Option ausgewählt), Keine (Großschreibung entsprechend der Eingabe), ersten Buchstaben groß schreiben, Kleinbuchstaben oder GROSSBUCHSTABEN aus. Wenn Sie z. B. GROSSBUCHSTABEN auswählen, wird der folgende Code hinzugefügt:

TEXT-TRANSFORM: uppercase