Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 29): Schöner Text durch CSS (1)

HTML & CSS für Einsteiger (Teil 29): Schöner Text durch CSS (1)

In diesem und den kommenden Video-Trainings werde ich euch die wichtigsten CSS-Eigenschaften vorstellen. Dabei geht es an dieser Stelle übrigens nicht darum, euch eine CSS-Referenz zu präsentieren. Vielmehr sollt ihr ein Gefühl dafür bekommen, was mit CSS alles möglich ist. Los geht es an dieser Stelle mit der Schriftgestaltung. Vorgestellt werden in diesem Video-Training all die Dinge, die direkt mit den sogenannten Fonts zu tun haben. Beachtet dabei, dass es hinsichtlich der Schriftgestaltung noch weitere Eigenschaften gibt, die dann im nächsten Video-Training gezeigt werden.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


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:

Bilder



 
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.

Bilder



 
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.

Bilder



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:

Bilder



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.

Bilder



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.

Weitere Teile


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Kiasa
  • 01.07.2015 - 09:11

Herzlichen Dank für die PDF-Datei!

Portrait von ZainaPhoto
  • 11.04.2015 - 13:29

Vielen Dank für das Videotutorial!

LG Zaina

Portrait von Monti7
  • 08.04.2015 - 18:19

Super! Vielen herzlichen Dank

Portrait von fe_web
  • 20.02.2015 - 11:27

Danke für dieses Tutorial.

Portrait von dlieb
  • 19.02.2015 - 10:35

Vielen Dank für dieses Tutorial.

Portrait von Pina82
  • 17.02.2015 - 16:07

Das komplette Training ist einfach nur Klasse, jedes Kapitel bietet Anregungen, Tipps und Neues - nicht nur für Anfänger

Portrait von Caesarion2004
  • 17.02.2015 - 15:54

Danke für den weiteren interessanten Teil der Reihe.

Portrait von Luther_Sloan
  • 17.02.2015 - 15:53

Vielen Dank für das interessante Tutorial.

Portrait von BOPsWelt
  • 17.02.2015 - 15:05

Vielen Dank für das Tutorial.

Portrait von MARIA52
  • 17.02.2015 - 13:42

Vielen Dank für das Tutorial.

Portrait von pallasathena
Portrait von Kundentest
  • 17.02.2015 - 13:13

Herzlichen Dank für das Tutorial.

Portrait von Enigmon
  • 01.02.2015 - 12:12

Schön einfach erklärt.. Vielen Dank!!

Portrait von Mäuschen
  • 03.01.2015 - 14:50

Der Inhalt wurde wieder kurz und leicht verständlich erklärt.
Vielen Dank

Portrait von Caesarion2004
  • 03.01.2015 - 10:48

Vielen Dank für das interessante Videotutorial.

Portrait von Kundentest
  • 03.01.2015 - 10:43

Herzlichen Dank für das Video.

Portrait von MARIA52
  • 03.01.2015 - 10:14

Vielen Dank für das Video.

x
×
×