CSS Befehle für Schriften

Wir haben die Möglichkeit, Schriftart, Schriftgröße, -dicke, Farbe und Ausrichtung sowie die „Fallback-Schriftart“ zu definieren. Letztere nutzt der Browser nach Möglichkeit, falls die gewünschte Schrift nicht auf dem Computer des Benutzers installiert ist.

Mit speziellen Anweisungen ist es möglich, Text einzurücken oder die Groß- und Kleinschreibung zu erzwingen und zu steuern. Dadurch kann der Text in Normalschrift geschrieben werden. Er wird lediglich via CSS in Großbuchstaben oder Kleinbuchstaben umgewandelt – somit indiziert Google den Text in Normalschrift. Folgende CSS Befehle passen Schrift und Texte an:

BefehlBedeutungMögliche Werte

font-family

Schriftart

Verdana, Arial, Tahoma, …

Custom Fonts (Google WebFonts, TypeKit, fonts.com)

font-size

Schriftgröße

Integer Wert in Pixel (px), mm, cm oder em

font-variant

Schriftvariante

normal, caps, small-caps

font-weight

Schriftstärke / Dicke

normal, bold, light, 300, 500, 600, 700, je nach verwendeter Schrift

font-style

Schriftstil

normal, italic

color

Schriftfarbe

Wert als rgb(), rgba(), oder Hex (#). Auch möglich: Standardfarben wie „green“, „blue“, „red“, „yellow“, …

text-align

Ausrichtung

links (left), mittig (center), rechts (right) oder Blocksatz (justify)

text-decoration

Text Dekoration

unterstrichen (underline), überstrichen (overline), durchgestrichen (line-trough)

text-transform

Transformation

Kapitälchen (capitalize), Versalien / Großbuchstaben (uppercase), Kleinbuchstaben (lowercase)

text-indent

Einrückung

Integer Wert in Pixel (px), mm, cm oder em

line-height

Zeilenhöhe

Integer Wert in Pixel (px), mm, cm oder em

word-spacing

Wortabstand

Integer Wert in Pixel (px), mm, cm oder em

letter-spacing

Zeichenabstand/ Buchstabenabstand

Integer Wert in Pixel (px), mm, cm oder em

Beispiele

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    font-family:Arial, Verdana, Tahoma;
    font-size:16px;
    line-height:20px;
    color:rgb(230,180,40);
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    font-family:Arial, Verdana, Tahoma;
    font-size:12px;
    line-height:16px;
    color:rgb(150,150,150);
    font-weight:bold;
    letter-spacing:4px;
    text-transform:uppercase;
}
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    font-family:Arial, Verdana, Tahoma;
    font-size:12px;
    line-height:16px;
    color:rgb(150,150,150);
    text-align:right;
    font-style:italic;
}

Bewerte diese Seite

 
 
 
 
 
 
 
Bewerten
 
 
 
 
 
 
3 Bewertungen
100 %
1
5
5
 

Veröffentlicht von

Kevin Lieser

Kevin Lieser

Kevin Lieser ist ausgebildeter Mediendesigner und seit 2008 mit der TYPO3 Agentur KA Mediendesign unternehmerisch tätig. Seine Leidenschaften sind gutes Webdesign und die PHP Programmierung. Als App Entwickler und Autor mehrerer TYPO3 Extensions engagiert er sich aktiv für die Weiterentwicklung von Webapplikationen und mobilen Anwendungen.