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

.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

p:first-line {font-weight:bold;}