font

Schriftfarbe: color: orange; | orange



Schriftgröße: font-size: 20pt; | 20pt



Schriftart: font-family: arial, "lucida console", sans-serif; /* wenn die 1. Schrift nicht verfügbar ist, wird die nächste gewählt; Namen mit Leehrzeichen in " oder ' setzen. */



Wenn man eine Schriftart nutzen möchte, die nicht sicher beim Besucher installiert ist, kann man auch via CSS eine Schriftart beim Besucher herunterladen lassen mit folgendem Code:
@font-face {
     font-family:'garamond';
     src:url('/style/font/garamond.ttf') format('truetype');
}

'woff', referenziert eine Schriftart im Format „Web Open Font Format“
'woff2', referenziert eine Schriftart im Format „Web Open Font Format 2“
'truetype', referenziert eine Schriftart im Format „True Type“
'opentype', referenziert eine Schriftart im Format „Open Type“



Schriftdicke: font-weight:bold; bold, bolder und lighter | bold



Schriftstil: font-style:italic; | = kursiv, oblique, schräggestellt | normal = normal



Textdekorationen: text-decoration = none, underline, overline, line-through | unten | oben | durch



Tiefe Buchstaben auslassen oder nicht: text-decoration-skip: ink
text-decoration-skip: ink; vs. text-decoration-skip: none;


Unterstreichung weiter nach unten setzen: text-underline-position
text-underline-position: under;


Text-Unterstreichung-Offset: text-underline-offset
Offset| Offset | Offset mit skip-ink | Offset


Musterung der Textdekorationen: text-decoration:
text-decoration: underline wavy;


text-decoration: underline dotted;


text-decoration: underline dashed;


Farbe der Textdekoration: text-decoration-color
text-decoration-color: purple;

Kombinationen der Textdekorationen: text-decoration:
text-decoration: underline wavy red;


text-decoration: underline wavy purple;

text-decoration: underline overline dotted purple;text-underline-position:under;



Schriftart-Variante: font-variant: small-caps; = Kapitälchen | Kapitälchen



Text-Transformation: text-transform = Großschreibung lowercase, uppercase, capitalize, none



Texteinzug: text-indent: 1.5em; Einrückung der ersten Zeile eines Textblockes



writing-mode: vertical-lr; Text dreht sich vertikal | Vertikal
Bei mehreren Zeilen sichtbar: vertical_lr & vertical rl



text-orientation: upright; | nur in Kombination mit writing-mode anwendbar zum Drehen der Buchstaben: | Vertikal



Buchstaben-/ Zeichenabstand: letter-spacing | Abstand



Wortabstand: word-spacing | Abstand Abstand Abstand



Zeilenhöhe: line-height |

Zeile 1
Zeile 2
Zeile 3

|

Zeile 1
Zeile 2
Zeile 3

Textschatten: text-shadow
text-shadow X-Achsenverschiebung Y-Achsenverschiebung Streuung Farbe
Schatten 1 | Schatten 2 | Schatten 3 | Schatten 4 | Schatten 5



Text-ausrichtung: text-align (in Blockelemente oder bei genügend Platz)
text-align: justify, left, right, center
rechts

rechts

center

links

Beim Blocksatz oder geschlossenen Zeilenfall handelt es sich in der Typografie um die Methode, einen Text so zu setzen, dass die Zeilen auf gleiche Breite gebracht werden. Bei Texten im lateinischen Alphabet geschieht dies vor allem durch Erweiterung der Wortzwischenräume. Die Ränder erscheinen sowohl auf der linken als auch auf der rechten Seite optisch bündig. Allerdings kann man bei genauer Betrachtung oft feststellen, dass dünne Zeichen (wie ein Bindestrich) und runde Zeichen (wie der Buchstabe „o“) tatsächlich minimal über den eigentlichen Rand des Textes hinausragen, da dies den optischen Eindruck von Bündigkeit durch eine optische Täuschung sogar verstärkt; so auch im abgebildeten Beispiel. Die letzte Zeile eines im Blocksatz formatierten Textes ist in der Regel am linken Absatzrand orientiert, und der Text läuft entsprechend seiner restlichen Länge aus. In selteneren Fällen, zum Beispiel bei manchen Gedichten oder um einen besonderen optischen Effekt zu erreichen, kann die letzte Zeile auch auf die Spaltenbreite zentriert werden. Die erste Zeile eines Absatzes ist häufig leicht eingerückt, um den Absatzbeginn auch dann erkennbar zu machen, wenn die letzte Zeile des vorhergehenden Absatzes zufällig (fast) die ganze Breite einnimmt. Von einem erzwungenen Blocksatz spricht man, wenn auch die letzte Zeile eines Absatzes auf die volle Zeilenlänge ausgeweitet wird.
https://de.wikipedia.org/wiki/Blocksatz | 15.Dez.2021 | 13:35 Uhr

Textfüllung und Umrandung: -webkit-text-stroke: 2px darkgrey; -webkit-text-fill-color: red;

Textfüllung und Umrandung



Der 1. Buchstabe: :first-letter {font-size:4em;} - funktioniert nicht inline! Objekt ansprechen

Beispiele

Schriftart: wenn vorhanden Arial, wenn nicht vorhanden, dann lucida console und wenn diese nicht vorhanden, dann eine vorhandene serifenlose Schrift. Schriften mit Serifen (Standfüßchen) font-family:courier, serif; Schriftart: wenn vorhanden Arial, wenn nicht vorhanden, dann lucida console und wenn diese nicht vorhanden, dann eine vorhandene serifenlose Schrift. Schriften mit Serifen (Standfüßchen) font-family:courier, serif; Schriftart: wenn vorhanden Arial, wenn nicht vorhanden, dann lucida console und wenn diese nicht vorhanden, dann eine vorhandene serifenlose Schrift. Schriften mit Serifen (Standfüßchen) font-family:courier, serif;

Schriftart: wenn vorhanden Arial, wenn nicht vorhanden, dann lucida console und wenn diese nicht vorhanden, dann eine vorhandene serifenlose Schrift.
Schriften mit Serifen (Standfüßchen) font-family:courier, serif; Schriftart: wenn vorhanden Arial, wenn nicht
vorhanden, dann lucida console und wenn diese nicht vorhanden, dann eine vorhandene
serifenlose Schrift. Schriften mit Serifen (Standfüßchen)
font-family:courier, serif; Schriftart:
wenn vorhanden Arial, wenn
nicht vorhanden,
dann
lucida
console und wenn
diese nicht vorhanden, dann
eine vorhandene serifenlose Schrift. Schriften
serifenlose Schrift. Schriften mit Serifen (Standfüßchen)
vorhanden, dann lucida console und wenn diese nicht vorhanden, dann eine vorhandene
Schriften mit Serifen (Standfüßchen) font-family:courier, serif; Schriftart: wenn vorhanden Arial, wenn nicht
Schriftart: wenn vorhanden Arial, wenn nicht vorhanden, dann lucida console und wenn diese nicht vorhanden, dann eine vorhandene serifenlose Schrift.

Schriftart: wenn vorhanden Arial, wenn nicht vorhanden, dann lucida console und wenn diese nicht vorhanden, dann eine vorhandene serifenlose Schrift. Schriften mit Serifen (Standfüßchen) font-family:courier, serif; Schriftart: wenn vorhanden Arial, wenn nicht vorhanden, dann lucida console und wenn diese nicht vorhanden, dann eine vorhandene serifenlose Schrift. Schriften mit Serifen (Standfüßchen) font-family:courier, serif; Schriftart: wenn vorhanden Arial, wenn nicht vorhanden, dann lucida console und wenn diese nicht vorhanden, dann eine vorhandene serifenlose Schrift. Schriften mit Serifen (Standfüßchen) font-family:courier, serif;