Websiteentwicklung: CSS: Schriftweite

Aus Wikibooks
Zur Navigation springen Zur Suche springen
Wikibooks buchseite.svg Zurück zu Schriftvarianten | One wikibook.svg Hoch zu CSS | Wikibooks buchseite.svg Vor zu Korrektur der Schriftgröße


Mit der Eigenschaft font-stretch kann das typische Aspektverhältnis Breite zu Höhe von Glyphen beeinflußt werden. Als einfachste Näherung kann man sich vorstellen, dass ausgehend von einem normalen Aspektverhältnis jede Glyphe in horizontaler Richtung skaliert wird, also gestaucht oder gestreckt. Bei den tatsächlichen Schrifttypen werden allerdings die Glyphen gegenüber dieser einfachen Veranschaulichung hinsichtlich der Lesbarkeit optimiert sein.

Diese Eigenschaft ist in CSS 2.0 verfügbar, aufgrund mangelnder Implementierungen wird sie jedoch in CSS 2.1 nicht erwähnt, und wird erst wieder in einem Arbeitsentwurf für das Font-Modul von CSS3 aufgeführt.

Mögliche Werte sind:

  • 'inherit' - geerbt
  • 'narrower' stärker zusammengedrängt als geerbt
  • 'wider' stärker geweitet als geerbt
  • 'normal' für normale Textausdehnung (Initialwert)
  • 'condensed' für zusammengedrängt
  • 'semi-condensed' für halb zusammengedrängt
  • 'extra-condensed' für stark zusammengedrängt
  • 'ultra-condensed'für extrastark zusammengedrängt
  • 'expanded' für geweitet
  • 'semi-expanded' für halb geweitet
  • 'extra-expanded' für stark geweitet
  • 'ultra-expanded' für extrastark geweitet

Die Reihenfolge ist von am stärksten zusammengedrängt bis zum am stärksten geweitet: 'ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'normal', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded'. 'narrower' und 'wider' setzen die Eigenschaft dann vom geerbten Wert auf den nächsten engeren oder weiteren in der Liste, ohne aber über die Liste hinauszureichen, 'narrower' als 'ultra-condensed' ist also wieder dasselbe 'ultra-condensed' und entsprechend 'wider' als 'ultra-expanded' ist also wieder dasselbe 'ultra-expanded'.

Die Eigenschaft wird vererbt und ist anwendbar für alle Elemente bei visuellen Medien.

Beispiel

p {
  font-stretch: expanded
}

Dieser Text wird gedehnt dargestellt.

Dieser Text wird extrastark zusammengedrängt dargestellt.


Wikibooks buchseite.svg Zurück zu Schriftvarianten | One wikibook.svg Hoch zu CSS | Wikibooks buchseite.svg Vor zu Korrektur der Schriftgröße