CSS-Regeln für Schriften

CSS-Regeln für Schriften

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure

Grundkenntnisse der Informatik werden vorausgesetzt, Kenntnisse von HTML und CSS sind vorteilhaft.


Formatierung mit und ohne ausdrückliche Regeln


CSS

Cascading StyleSheets (→ CSS) ist eine 'Programmiersprache' zur Formatierung von Webseiten und anderen Dokumenten.

Mit CSS-Regeln kann man zahlreiche Eigenschaften von Schriften (↓ Details) und anderen Elementen beeinflussen, z.B.



HTML-Elemente und -Attribute



Alle HTML-Elemente und -Attribute, die nur zur Formatierung dienen, sollte man nicht mehr verwenden, z.B. die Elemente
<b> <basefont> <blockquote> <center> <em> <face> <font> <i> <strong> <u>
oder die Attribute
align alink background bgcolor big border bordercolor color face height hspace left leftmargin link marginheight marginwidth rightmargin size small text top topmargin valign vlink vspace width ...
Diese Elemente und Attribute werden besser durch CSS-Anweisungen ersetzt.

Sie sind teilweise in neuen Standards (→ HTML-5) nicht mehr enthalten oder werden in Zukunft daraus entfernt. Man sollte sie daher in neuen Entwicklungen nicht verwenden.


  HTML <style>-Element

Mit einem <style>-Element im <head> einer Webseite kann man CSS-Regeln für die jeweilige Seite festlegen, z.B.
<style type="text/css" media="screen">
h1{color:blue;}
</style>
Die hier definierten Regeln ergänzen bzw. überschreiben alle vorher (z.B. in einem StyleSheet) festgelegten Regeln für alle Elemente der jeweiligen Webseite.

Details zum Thema → HTML <style>-Element

  style-Attribut

Jedes beliebige HTML-Element kann ein style-Attribut enthalten, z.B.
Text in <span style="font-weight:bold;">fetter</span> Schrift
Diese Regeln ergänzen bzw. überschreiben alle vorher festgelegten Regeln für dieses eine HTML-Element.

Details zum Thema → style-Attribut

CSS Schrift-Eigenschaften

EigenschaftWerte
background‑colorHintergrund‑Farbe Alle in CSS erlaubten Farb-Namen und -Angaben (→ Details)
colorSchrift‑Farbe
fillFüll-Farbe In → SVG <text>-Elementen
justify-contentAusrichtung Innerhalb meines → Flex-Elements
letter-spacingZeichen-Abstand Relativ (em) oder ± absolut (pt, px)
line-heightZeilen-Höhe Alle in CSS erlaubten Größen-Angaben, z.B. em, %, pt, px, mm, ...
font‑familySchrift‑Familie Eine Liste von Schriften, die durchlaufen wird, bis eine davon am Client-PC gefunden wird.
font‑sizeSchrift‑Größe Alle in CSS erlaubten Größen-Angaben, z.B. em, %, pt, px, mm, ...
font‑styleSchrift‑Schnitt normal (normal) oder kursiv (italic)
font‑weightSchrift‑Schnitt normal (normal) oder fett (bold)
page-breakSeiten-Umbruch Neue Seite bei Ausgabe am Drucker
quotesAnführungs­zeichen z.B. für „deutsche“ Zeichen "\201E" und "\201C"
strokeRand-Farbe In → SVG <text>-Elementen
text‑alignAusrichtung Linksbündig (left), zentriert (center) oder rechtsbündig (right)
text‑anchor In → SVG <text>-Elementen
text‑decorationSchrift‑Schnitt normal (normal) oder unterstrichen (underline)
text-indentEinrückung der 1.Zeile: Alle Größen-Angaben, z.B.em, %, pt, px, mm, ...
text-shadowSchatten Angaben zu Abstand, Farbe und Verwischen möglich
transformTransformation Rotation, Verschiebung, Verzerrung und Kombinationen davon
vertical‑alignVertikale Ausrichtung oben (top), zentriert (middle) oder unten (bottom)
word-spacingWort-Abstand Relativ (em) oder absolut (pt, px)



Es gibt mehrere Möglichkeiten, um eine unterbrochene Vererbung wieder herzustellen. Hier wird angenommen, dass die Schrift-Familie ungewollt nicht in <div> und <span>-Elemente übernommen wird:

Man findet die störende Regel, entfernt sie oder ändert sie.
Man legt für alle betroffenen Elemente ausdrücklich fest, dass die gewünschte Eigenschaft vom Eltern-Element zu erben ist, z.B.:
div,span{font-family:inherit;}
Man legt die gewünschte Eigenschaft ausdrücklich für alle betroffenen Elemente fest, z.B.
div,span{font-family:Verdana,sans-serif}


Die Software-Versionen ändern sich rasch. Je nach Hersteller muss der Leidensdruck der AnwenderInnen verschieden stark steigen, bevor manche Standards auch wirklich befolgt werden.
Es ist daher Aufgabe der EntwicklerInnen, die Fähigkeiten der wichtigsten Browser zu kennen und die Produkte darauf abzustimmen. Die Situation hat sich immerhin deutlich gebessert, seit das Monopol eines bekannten Browser-Herstellers gefallen ist.

CSS Standard-Schriften


Dieses Beispiel ist nicht nach vorgegebenen CSS-Regeln formatiert, sondern verwendet die an ihrem Browser eingestellten Standard-Schriften. Das Aussehen variiert daher je nach Betriebssystem, Browser, -Version und -Konfiguration:
<div style="font-family:monospace;">
Das ist Monospace
</div>
<div style="font-family:sans-serif;">
Das ist Sans-Serif
</div>
<div style="font-family:serif;">
Das ist Serif
</div>


Schrift-Familie

.myMono {font-family: 'Courier New', Courier, mono;}
.mySans {font-family: 'Vera Sans', Verdana, Helvetica, sans-serif;}
.mySerif {font-family: 'Times New Roman', Cambria, Times, serif;}
Mit der CSS-Eigenschaft font-family wird normalerweise eine Liste von Schrift-Familien angegeben. Rechts CSS-Anweisungen mit typischen Werten. Die erwünschten Schrift-Familien werden in der angegebenen Reihenfolge im jeweiligen Betriebssystem gesucht. Wenn das keinen Treffer ergibt, dann wird die zuletzt angeführte Standard-Schrift des jeweiligen Browsers verwendet.


Es ist wenig sinnvoll, selten verwendete Schriften in der Liste anzugeben, da sie vermutlich nur auf wenigen Client-PC installiert sind. Wenn eine bestimmte Schift-Familie unter allen Umständen verwendet werden soll, dann muss man sie vom Server laden. Die folgenden Kapitel zeigen dazu einige Möglichkeiten.

Im eigenen IntraNet gilt das nicht: Man kann eine ausgefallene Schrift-Familie auf allen PC des lokalen Netzwerks installieren. Wenn diese Schrift mit CSS angegeben wird, dann wird sie gefunden und verwendet.
Das funktioniert allerdings nicht für BesucherInnen oder Gäste:  An deren NoteBooks oder SmartPhones ist die Sonder-Schrift nicht installiert und wird auch nicht verwendet.



In der Praxis bewährt sich am besten die relative Einheit em ( Wikipedia)
1 em entspricht ungefähr der Breite des jeweiligen (!) Zeichens M
Die Einheit em kann man für fast alle CSS-Eigenschaften wie Höhe, Breite, Abstand, ... verwenden. Man hat damit zwar keine absolute Kontrolle, das angezeigte Schriftbild ist jedoch weitgehend unabhängig von Hardware und Konfiguration.

Die relative Einheit em ist insbesondere für solche Webseiten empfehlenswert, die (auch) von → Smartphones angezeigt werden sollen.

Faustregel
für die Umrechnung von em in Pixel, abhängig von der → Auflösung des Bildschirms:
1 em ≈ 12 px @ 72 dpi
1 em ≈ 16 px @ 96 dpi
1 em ≈ 24 px @ 144 dpi

CSS-Anweisung @font-face


Beispiel einer Definition mit CSS:
@font-face {font-family:myOrbitron; src:url(Orbitron.ttf);}
Mit font-family kann man einen eigenen Namen festlegen - zweckmäßig nicht identisch mit irgend einem 'echten' Schrift-Namen.
Mit src:url() wird der Pfad zur Schrift-Datei angegeben, die man zu diesem Zweck (ähnlich wie → Grafik-Dateien) auf den WebServer-PC hochladen muss. Die Schrift muss lediglichg als Datei vorhanden sein, sie wird im Betriebssystem des Server-PC nicht installiert.

Beispiel der Anwendung mit HTML (vereinfacht):
<div style="font-family:myOrbitron;">
Text in Orbitron
</div>

So sieht das Ergebnis aus:



Beispiel einer Begrenzung auf die deutschen Umlaute und das (einzelne) €-Zeichen:
@font-face {font-family:myOrbitron; src:url(Orbitron.ttf); unicode‑range:U+0‑FF,U+20AC;}

Damit wird (je nach Umfang der Schrift-Datei) ca. 98% der Übertragungszeit eingespart.

Unicode-Zeichen


Eine Schrift-Familie (font-family) definiert die genaue Darstellung der darin enthaltenen Zeichen. Es ist jedoch nicht vorgeschrieben, welche Zeichen codiert sein müssen.

Man sollte daher streng zwischen allgemein verwendbaren Standard-Schriftfamilien und Sonder-Schriften für ausgewählte Aufgaben unterscheiden.


Sonder-Schriften (insbesondere kostenfreie) enthalten meist nur eine kleine Anzahl von Zeichen. Man erkennt sie u.a. an der Datei-Größe (<100 kiB).

Tipp: Testen sie mindestens 1 Zeichen aus jeder hier angegebenen Gruppe, um die Verwendbarkeit einer Schrift-Familie für einen bestimmten Zweck festzustellen:
Gruppe
Zeichen
Unicode
Ziffern
0..9
U+0030‑0039
Großbuchstaben
A..Z
U+0041‑005A
Kleinbuchstaben
a..z
U+0061‑007A
Deutsche Sonderzeichen
ÄÖÜäöüß
U+00A0‑00FF
Euro
U+20AC
Α..Ω α..ω
U+0390‑03CF
∓√∫≃≈∞...
U+2200‑229F
⇐⇕⇗↔
U+2190‑21FF
■△●┅♣♥
U+25A0‑26AF
😌😊😍🙂🙁
U+1F600‑1F64F

Fontdatei-Typ


Objekt-Grafik: Man beschreibt die Form mit Hilfe von Linien und mathematisch festgelegten Kurven. Diese Art der Definition erlaubt unbegrenzte Skalierung (Vergrößerung, Verkleinerung) jedes Zeichens mit maximaler Qualität.
Alle modernen Schrift-Definitionen ( TrueType, OpenType, WOFF, PostScript, ...) verwenden Objekt-Grafik.

Der Typ Embedded OpenType (EOT) ist weitgehend auf MS-Systeme und -Browser beschränkt und wird in diesem Web nicht verwendet.

Weitere Datei-Formate wurden entwickelt, um die Interessen kommerzieller Schrift-Anbieter zu schützen. Diese Schriften lassen sich nur mit entsprechender Lizenz verwenden.


Wenn man Schrift-Dateien von einem (Web)-Server ladet, dann bestimmt die Transport-Zeit als langsamster Schritt die Geschwindigkeit der Anwendung.
Jedes Laden von nicht unbedingt notwendigen Dateien verzögert den Aufbau von Webseiten !

Am einfachsten ist die Verwendung von OnLine-Diensten wie z.B. GoogleFonts: In diesem Fall setzt man lediglich Verweise auf den Server des Providers.
Die Verwendung von Schrift-Dateien am eigenen IntraNet Webserver ist möglich, weil man den Erfolg einfach kontrollieren kann.
Die Verwendung auf einem öffentlichen Server erfordert fortgeschrittene Kenntnisse: Die verschiedenen Browser und -Versionen (SmartPhones) reagieren derzeit noch nicht einheitlich. Der Datei-Typ WOFF ist für neue Entwicklungen am besten geeignet.

Statische Text-Grafik


Eine statische Grafik-Datei bietet Sicherheit gegen unerwünschte Änderung von Form oder Farbe an einem nicht kontrollierbaren Client-PC.

Diese Methode ist einfach, jedoch wenig flexibel: Man braucht für jeden Text eine eigene Grafik-Datei.


Ein Programm ähnlich wie im ↓ nächsten Beispiel braucht nur die Schrift-Datei *.ttf, die nicht installiert sein muss.
Damit kann man den gewünschten Text rendern und in einer Pixel-Grafik-Datei speichern. Diese Datei wird anschließend mit einem Grafik-Programm nach-bearbeitet.

Dynamische Text-Grafik



Moderne Programmiersprachen sind modular aufgebaut. Man muss daher meist ein spezielles Modul laden, um programmierte Pixel-Grafik zu erzeugen.

In klassischen Fällen wurde dazu die kostenfreie GD-Bibliothek verwendet. Programme in den Programmiersprachen Perl oder → PHP werden am Server-PC ausgeführt (→ Diagramm) und senden lediglich die fertige Grafik-Datei an den Browser. Der Webserver wird damit erheblich belastet, daher ist diese Technologie weitgehend überholt.

Die Programmiersprache Javascript kann seit der Version → HTML-5 mit Hilfe der Canvas-Technologie ebenfalls Pixel-Grafik herstellen.
Javascript-Programme werden am Client-PC (an ihrem Arbeits-PC) ausgeführt und reduzieren daher die Belastung des Servers erheblich. Das folgende Beispiel wurde mit → Javascript + Canvas programmiert.



Das angezeigte SchriftBild ist tatsächlich ein Bild:
Die Pixel-Grafik wird nach ihren Angaben Live von einem Programm in der Programmiersprache Javascript 'gemalt'.
Man kann die Grafik - so wie jede andere - mit RechtsKlick als Datei am eigenen Arbeits-PC speichern. Sie bleibt dann jedoch statisch unverändert.


Mit diesem Link wird die ↗ Mini-Webseite mit dem Beispiel in einem eigenen Browser-Tab angezeigt.
Die Details der Programmierung gehen über das Thema dieser Seite hinaus und werden daher nicht kommentiert. Bei Interesse kann man den ↗  Javascript+Canvas Quelltext ansehen.