CSS stellt gerade auch für die Anpassung des Schriftbildes zahlreiche Eigenschaften zur Verfügung. Diese reichen von der Schriftart über den Schriftstil bis hin zu Schattenwürfen.
Unter den CSS-Schrifteigenschaften werden Angaben zu Schriftart, Schriftstil und Schriftgewicht verstanden. Sinnvoll sind diese Eigenschaften natürlich hauptsächlich für HTML-Elemente, in denen Text enthalten ist (p, i usw.). Ebenso können sie aber auch für Tabellen eingesetzt werden.
Über font-family lässt sich die zu verwendende Schriftart bestimmen.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>Das Ergebnis sieht im Browser folgendermaßen aus:
Typische Schriftarten sind beispielsweise Arial, Helvetica und Times Roman. Der CSS-Eigenschaft font-family weist man die gewünschten Schriftarten zu. Gibt man mehrere Schriftarten an, ist die Reihenfolge entscheidend. Ist die erste angegebene Schriftart verfügbar, wird diese verwendet. Die gewünschten Schriftarten sind dabei durch Kommata getrennt voneinander zu notieren. Als letzte Anweisung notiert man üblicherweise eine sogenannte generische Schriftfamilie. Durch eine solch generische Schriftfamilie gibt man den Browsern die Möglichkeit, eine Schriftart auszuwählen, die der angegebenen zumindest ähnlich ist.
• serif = eine Schriftart mit Serifen
• sans-serif = eine Schriftart ohne Serifen
• cursive = eine Schriftart für kursive Schrift
• fantasy = eine Schriftart für ungewöhnliche Schrift
• monospace = eine Schriftart mit dicktengleichen Zeichen.
Der Schriftstil
Über die Eigenschaft font-style könnt ihr den Schriftstil bestimmen. Lässt die gewählte Schriftart es zu, kann man über den Wert italic eine kursive Schreibweise erzwingen.
Andere Schriftarten lassen sich durch oblique schräg stellen.
Die nächste CSS-Eigenschaft, über die sich das Schriftbild beeinflussen lässt, nennt sich font-variant. Darüber lassen sich sogenannte Kapitälchen definieren.
Dazu weist man font-variant den Wert small-caps zu.
Die Schriftgröße
Sehr wichtig ist natürlich auch die Angabe einer Schriftgröße. CSS stellt dafür die Eigenschaft font-size zur Verfügung. Schriftgrößen lassen sich dabei in ganz unterschiedlichen Einheiten angeben.
• EM
• REM
• Pixel
• Prozent
• Schlüsselwörter
Als Schlüsselwörter stehen die folgenden Varianten zur Verfügung:
• xx-small – sehr, sehr klein
• x-small – sehr klein
• small – klein
• smaller – kleiner als im Elternelement
• medium – mittel
• large – groß
• x-large – sehr groß
• xx-large – sehr, sehr groß
• larger – größer als im Elternelement
Hier ein Beispiel, wie sich die Schriftgröße festlegen lässt:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}Und so sieht das Ganze im Browser aus:
Beachtet bitte, dass das Thema Schriftgrößendefinition sehr komplex ist, da die verschiedenen Maßeinheiten jeweils ihre Vor- und Nachteile haben.
Einen guten Überblick darüber, welche Maßeinheit man am besten wann verwenden sollte, findet ihr auf der Seite http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. So viel für all diejenigen, die sich das nicht durchlesen wollen: Verwendet relative Angaben wie em für die Darstellung ab Bildschirm. Für Drucklayouts setzt man hingegen auf absolute Einheiten wie pt.
Das Schriftgewicht
Weiter geht es mit dem sogenannten Schriftgewicht. Darüber bestimmt man die Dicke und Stärke einer Schrift. Verwendet wird dafür die Eigenschaft font-weight.
.fett {
font-weight:bold;
}
Durch diese Syntax wird der so ausgezeichnete Text in Fettschrift angezeigt.
Mögliche Werte sind bold (fett), bolder (besonders fett), lighter (dünner) und normal. Zudem sind die numerischen Werte 100, 200, 300, 400, 500, 600, 700, 800 und 900 erlaubt. Diese reichen von extra-dünn (100) bis besonders fett (900).
Definitionen zusammenfassen
Im Zusammenhang mit Schriftdefinitionen spielt auch die Eigenschaft line-height eine wichtige Rolle, über welche sich die Zeilenhöhe definieren lässt. Ich komme später noch einmal ausführlicher auf diese Eigenschaft zu sprechen. An dieser Stelle muss sie lediglich erwähnt werden, da sie im Zusammenhang mit der nachfolgend gezeigten font-Eigenschaft eine gewisse Rolle spielt.
Ihr könnt die bislang vorgestellten Angaben zur Schriftdarstellung miteinander kombinieren. Verwendet wird dafür die allgemeine font-Eigenschaft. Diese umfasst die folgenden Einzelangaben bzw. schließt diese mit ein.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Über font lassen sich verschiedene Schriftformatierungen miteinander kombinieren. Dabei könnt ihr die zuvor genannten Eigenschaften angeben, müsst aber nicht alle verwenden. Pflicht sind allerdings die Eigenschaften für Schriftgröße und Schriftfamilie.
Dank der Kurzschreibweise lassen sich CSS-Dateien kürzer und übersichtlicher halten.
Die Reihenfolge, wie sie nachfolgend gezeigt wird, ist aber einzuhalten. Wenn die beiden Eigenschaften font-size und line-height notiert werden, sind diese durch einen Schrägstrich zu trennen. Wird an dieser Stelle lediglich ein Wert angegeben, so steht dieser für font-size.
Ein Beispiel:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust wurde entwickelt, um damit Schriftarten annähernd gleich groß darstellen zu können. Unterschiedliche Schriftarten weisen bei gleicher Schrifthöhe verschiedene x-Höhen auf. Allerdings sind Schriften mit größerer x-Höhe besser lesbar. So kann es dann passieren, dass ein Dokument schlecht lesbar ist, wenn die ursprüngliche Schriftart nicht vorhanden ist und durch eine andere mit einer kleineren x-Höhe ersetzt wird. Mit font-size-adjust soll dieser Unterschied ausgeglichen werden können.
Ein Beispiel:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
Im nächsten Tutorial lernt ihr weitere Möglichkeiten kennen, mit denen ihr das Schriftbild eurer Webseite anpassen könnt.
