Beispiele: Definitionen für Schriften
Textlauf
Letter Spacing
Normales Spacing ist hier zu sehen
p { letter-spacing: normal; }
Ein besonders luftiger Wort abstand.
.luftig { letter-spacing: 15px }
Word Spacing
Normales Spacing ist hier zu sehen
p { letter-spacing: normal; }
Ein besonders grossen Wort Abstand.
.word { word-spacing: 25px }
Textauszeichnungen
Text Decoration
Dieses Element ist überstrichen.
.overline { text-decoration: overline; }
Das hier ist durchgestrichen.
.line-through { text-decoration: line-through; }
Dieses Text blinkt auf alten Browsern.
.blink { text-decoration: blink; }
Hier ist ein Link der unterstrichen ist.
a.link { text-decoration: underline; }
Text Transform
egal was in der source steht, ausgegeben wird es gross
.uppercase { text-transform: uppercase; }
egal was in der source steht, ausgegeben wird es klein
.lowercase { text-transform: lowercase; }
egal was in der source steht, ausgegeben wird capitalize
.capitalize { text-transform: capitalize ; }
Textlauf
line-height / normal
Inhaltsleer
Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit und habe doch eine Bitte: Handeln Sie Sinn stiftend für meine Existenz und lesen Sie mich.
Quelle: Christian Beckmann / Spiegel Online
p { line-height: normal; }
line-height / 28px
Inhaltsleer
Streng dem definierten Wesen des Blindtextes folgend, fungiere ich als solcher und gebe mich unverbindlich inhaltsleer. In bedrückender Enge in vorgefertigte Masken gepresst friste ich ein freudloses Dasein auf dem schmalen Grat zwischen Nichtbeachtung und Bedeutungslosigkeit und habe doch eine Bitte: Handeln Sie Sinn stiftend für meine Existenz und lesen Sie mich.
Quelle: Christian Beckmann / Spiegel Online
.hoch { line-height: 28px; }
Pseudo Klassen
First Letter
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed imperdiet vulputate mauris. Fusce commodo congue nisl. Donec accumsan. Aenean porta varius mauris. Duis libero. Proin in dui a metus fermentum posuere. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam tempus felis id purus. Nunc vitae risus. Morbi tempor ultricieselit.
Ut ac odio. In in augue sit amet nunc lobortis cursus. Quisque adipiscing lectus sed justo. Vivamus volutpat libero ut urna. Integer vel turpis vel leo fringilla tincidunt. Nulla luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur a augue vel metus euismod tempus. Nulla facilisi.
p:first-letter {
font-family: serif;
font-size: 40px;
font-weight: bold;
}
First Line
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed imperdiet vulputate mauris. Fusce commodo congue nisl. Donec accumsan. Aenean porta varius mauris. Duis libero. Proin in dui a metus fermentum posuere. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam tempus felis id purus. Nunc vitae risus. Morbi tempor ultricieselit.
Ut ac odio. In in augue sit amet nunc lobortis cursus. Quisque adipiscing lectus sed justo. Vivamus volutpat libero ut urna. Integer vel turpis vel leo fringilla tincidunt. Nulla luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur a augue vel metus euismod tempus. Nulla facilisi.
p:first-line {font-weight:bold;}


print

