Websiteentwicklung: CSS: Schriftformatierungen
Übersicht aller Schriftformatierungen
[Bearbeiten]| Eigenschaft | Kurzbeschreibung | Mögliche Werte | Verwendung, Beispiel, Kommentar |
|---|---|---|---|
| font-family | Einstellung der Schriftart | Liste mit Namen von Schriftarten | Als Wert wird eine Liste mit Namen der Schriftarten verwendet. Es können mehrere Schriftarten (durch Kommata abgetrennt) angegeben werden, da ja nicht jeder alle möglichen Schriftarten auf dem Rechner hat. Treten im Namen Leerzeichen auf, ist der Name in Anführungszeichen zu setzen. Als letzter Listenpunkt sollte eine generische Schriftfamilie wie etwa "sans-serif" oder "serif" angegeben werden (das sind vordefinierte Schlüsselwörter, die nie in Anführungszeichen zu setzen sind), weil Darstellungsprogramme für jede generische Schriftfamilie eine geeignete Schriftart bereitstellen muß, also immer auch garantiert eine Schriftart überhaupt die Darstellung des Textes gewährleistet. Beispiel: font-family:'Times New Roman',serif => Anwendungsbeispiel
|
| font-size | Einstellung der Schriftgröße | Länge, Prozentwert oder eines der Schlüsselwörter xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, inherit | Bei den Schlüsselwörtern richtet sich die Größe der Schrift nach der im Darstellungsprogramm angegebenen Größe - sofern der Nutzer das selbst für sich optimal eingestellt hat, ergibt sich für 'medium' so optimale Lesbarkeit. Das Darstellungsprogramm verändert bei den anderen Schlüsselwörtern die Größe entsprechend der Bezeichnung (zum Beispiel "smaller"=kleiner als die bisherige aktuelle Schriftgröße) beziehungsweise sucht die für den jeweiligen Begriff vorgesehenen Einstellungen heraus. Beispiele: font-size:larger oder font-size:2em oder font-size:150% => Anwendungsbeispiel oder Anwendungsbeispiel oder Anwendungsbeispiel
|
| font-weight | Einstellung des "Schriftgewichtes" | normal, bold (=fett), bolder (=fetter), lighter (=dünner); 100 - 900 (verschiedene Abstufungen in Hunderter-Schritten; 700 = bold) | "Schriftgewicht" entspricht einfach nur der Fette des Textes, das heißt, ob der Text fett geschrieben ist oder nicht. Dabei gilt es zu beachten, dass nicht bei allen Schriftarten alle Gewichte verfügbar sind, es wird dann das nächstliegende verfügbare verwendet; verschiedene Angaben können also gleich dargestellt werden. Beispiel: font-weight:bold => Anwendungsbeispiel
|
| font-style | Einstellung des Schriftstils | normal, italic, oblique | italic repräsentiert eine kursive Darstellung der Schrift und oblique eine schräggestellte. Das Schrägstellen der Glyphen kann leichter durch Scherung automatisch simuliert werden, während eine echte kursive oder auch oblique Schrift spezielle Repräsentationen der Glyphen erfordert. Sofern diese nicht vorhanden ist, wird oft auch für italic eine automatisch gescherte Variante verwendet. Beispiel: font-style:oblique => Anwendungsbeispiel
|
| font-variant | Einstellungen der Schriftvariante | normal, small-caps (=Kapitälchen; kleine Großbuchstaben) | Bsp.: font-variant:small-caps => Anwendungsbeispiel
|
| font-stretch (nicht in CSS2.1) | Ausdehnung eines Textes; Schriftlaufweite | normal, wider (=weiter), narrower (=enger), condensed (=gedrängt), semi-condensed (=halb-gedrängt), extra-condensed (=stark gedrängt), ultra-condensed (=sehr stark gedrängt), expanded (=geweitet), semi-expanded (=halb-geweitet), extra-expanded (=stark geweitet), ultra-expanded (sehr stark geweitet) | Beispiele: font-stretch:extra-expanded oder font-stretch:condensed => Anwendungsbeispiel oder => AnwendungsbeispielWegen mangelnder Interpretation in den Darstellungsprogrammen wird die Eigenschaft einstweilen in CSS2.1 nicht aufgeführt. |
| font-size-adjust (nicht in CSS2.1) | Korrektur der Schriftgröße bei Verwendung mehrerer Schriftgrößen | der Wert ist eine Zahl oder das Schlüsselwort 'none' | Die Zahl gibt das Verhältnis zweier charakteristischer Schriftgrößen an, 1 entspricht also der vom Autor gewählten Referenzschrift. Sind in dieser einige Glyphen nicht verfügbar, wird in der Liste der font-family auf die nächste Schriftart zurückgegriffen. Glyphen dieser zweiten Schriftart können bei gleicher Schriftgröße bei gleicher Angabe der Schriftgröße eine andere Anmutung oder Lesbarkeit haben. Mittel font-size-adjust kann dann ein Korrekturfaktor angegeben werden, damit dies ausgeglichen wird. Charakteristischer Vergleichwert ist dabei zum Beispiel das Verhältnis von 1em zu 1ex bei den jeweiligen Schriftarten. Der Korrekturfaktor ist folglich ein Wert größer als 0, der typisch zwischen 0.5 und 2 liegt. Werte kleiner als 1 verkleinern die Schriftgröße, Werte größer als 1 vergrößern sie. Beispiel unter der Annahme, dass bei der ersten Schriftart einige Glyphen fehlen: <span style="font-family:Cracked, fantasy; font-size-adjust: 1.25">Ein Bëïspïël ℵ ℜ ℑ ℘</span> =>Ein Bëïspïël ℵ ℜ ℑ ℘ Wegen mangelnder Interpretation in den Darstellungsprogrammen wird die Eigenschaft einstweilen in CSS2.1 nicht aufgeführt. |
| font | Zusammenfassung der font-Eigenschaften | Kurzform der einzelnen Eigenschaften | Hier werden Eigenschaften zu einer Kurzform zusammengefaßt. Die Reihenfolge ist vorgegeben, allerdings sind viele Angaben optional, können also weggelassen werden. Zunächst können Werte für font-style, font-variant, font-weight notiert werden, alle optional und egal in welcher Reihenfolge. Dann folgt font-size, optional gefolgt von einer Kombination von einem Schrägstrich '/' mit folgendem line-height, gefolgt von font-family (line-height wird im Abschnitt über Textformatierungen erläutert und gibt die Zeilenhöhe an, sinnvoller Weise immer größer gleich 1em). Alternativ kann auch ein Schlüsselwort angegeben werden, welches einen bestimmten Satz von Werten repräsentiert: 'caption', 'icon', 'menu', 'message-box', 'small-caption', 'status-bar'. Diese Sätze sind im Darstellungsprogramm oder in der verwendeten graphischen Oberflächen definiert. Beispiele: font:bold italic small-caps 1.4em/2em serif => Anwendungsbeispiel;font:message-box => Anwendungsbeispiel
|