Webdesign mit CSS, HTML und Javascript
Stil mit {stil}
Fotokurse und Schulungen»Digitale Fotografie - Bildgestaltung« Noch nie war es so einfach, Fotografieren zu lernen |
Fotografie von ihrer besten Seite: Aktuelle Kameras, Bildbearbeitung und Fototipps auf foto.5lux.de |
CSS-Eigenschaft font-weight – fette Schrift (bold)
Der fett gesetzten Schrift geht es im Internet wie den Kapitälchen: Sie wird vom Browser dicker dargestellt – der Grafiker oder Setzer würde einen »echten Fettschnitt« lieber sehen. So bietet die CSS-Eigenschaft font-weight zwar eine Auswahl von weniger fett über normal bis hin zu sehr fett, aber die gewählte Schrift muss über verschiedene Schnitte in den jeweiligen Abstufungen verfügen, was heute bei den Systemschriften wie Arial, Verdana und Times nicht der Fall ist.
Selbst wenn auf dem Rechner des Besuchers verschiedene Fettschnitt installiert wären, werden die meisten Browser diese Schnitte nicht erkennen: Die meisten Browser erkennen nur normal und bold als Schriftgewicht.
Hier liegen also keine unterschiedlichen Fettschnitte vor (falls die Schriften beim Besucher installiert sind), sondern echt fette Schriften:
<p style="font-family: 'Arial', sans-serif; font-weight: bold;">Fette Schrift kann …</p> <p style="font-family: 'Arial Black', sans-serif;">Fette Schrift kann …</p> <p style="font-family: 'Arial Narrow Black', sans-serif;">Fette Schrift kann …</p>
So bleibt uns nur der alte Trick, auf unterschiedliche Helligkeiten zur unterschiedlichen Betonung von fetten Hervorhebungen zurückzugreifen.
Fette Schrift kann sich ganz schön dick machen
Fette Schrift kann sich ganz schön dick machen
Fette Schrift kann sich ganz schön dick machen
Fette Schrift kann sich ganz schön dick machen
font-weight
IE4+ M1 N4+ O5+ S1 CSS1 Erblich: Ja
- font-weight
- stellt die Schrift fett oder in verschiedenen Abstufungen von fett dar.
- Werte
- normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
- normal
- ist die Voreinstellung. Auf der numerischen Skala von 100 bis 900 wird normal üblicherweise bei 400 angesiedelt. Die Angabe von normal stellt sicher, dass keine vorangegangene Deklaration die Darstellung des Textes beeinflusst.
- bold
- entspricht der Darstellung im <b>-Tag von HTML. Auf der numerischen Skala von 100 bis 900 ist bold üblicherweise bei 700 angesiedelt.
- bolder
- stellt die Buchstaben um eine Stufe fetter dar. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform und Browser bestimmt.
- lighter
- stellt die Buchstaben um eine Stufe weniger fett dar. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform/Browser bestimmt.
- 100 ... 900
- stellt die Buchstaben in 9 Stufen von fett dar. Je größer der Wert ist, umso fetter wird der Text dargestellt. Auf der numerischen Skala von 100 bis 900 entspricht 400 normal und 700 bold. Die Stärke der Stufen wird durch die Kombination aus Rechnerplattform und Browser bestimmt.
bold, bolder und Gewicht
p { font-weight: normal; }
p { font-weight: bold; }
p { font-weight: bolder; }
oder
<span style="font-weight: lighter">lighter</span>
<span style="font-weight: bolder;">bolder</span>
<span style="font-weight: 100;">100 </span>
Darstellung
lighter normal bold bolder 100 200 300 400 500 600 700 800 900
Webseiten mit CSS gestalten
Element-, Klassen- und ID-Selektoren
background & color Farben
font Schriftgestaltung auf Webseiten
text-align • Ausrichten von Texten
- letter-spacing • Raum zwischen Zeichen
- text-decoration • Text unterstreichen
- text-indent • Text einrücken
- text-transform • Großschreibung / Versalien
- white-space • Zeilenumbruch in Texten
- word-spacing • Raum zwischen Wörtern
- vertical-align • Hochstellen / Tiefstellen
- direction | unicode-bidi • Laufrichtung von Texten
width height
margin • äußerer Abstand
list-style Listen und Aufzählungen
position Positionierung
table Tabellen
user interface Mauszeiger / cursor
visibility Sichtbarkeit
generated content • Autom. generierte Zähler
Kurzreferenz CSS 2.1-Eigenschaften
Fotokurse und Schulungen
