Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 45): Schicke Schriften für die Seite

HTML & CSS für Einsteiger (Teil 45): Schicke Schriften für die Seite

Ein entscheidender Aspekt für eine optisch ansprechende Webseite ist natürlich deren Schriftbild. Im Verlauf dieser Reihe habt ihr bereits die Möglichkeiten kennengelernt, die euch HTML und CSS hinsichtlich der Schriftgestaltung zu bieten haben. In diesem Video-Training werden diese verwendet, um die Seite aufzupeppen. Dabei werden wir uns übrigens nicht nur den klassischen Varianten widmen. Das Zauberwort für den Einsatz "exotischer" Schriftarten heißt dabei @font-face.

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


Die übliche Variante zur Definition von Schriftarten sieht in etwa folgendermaßen aus:

body {
   font-family: Arial, Helvetica, sans-serif;
}

Hier wird dem body-Element die Schriftart Arial zugewiesen. Sollte diese auf dem System des Betrachters nicht vorhanden sein, wird auf Helvetica zurückgegriffen. Wenn es auch Helvetica nicht geben sollte, wird der Browser angewiesen, wenigstens eine Schriftart ohne Serifen zu verwenden. Wirklich kontrollieren lässt sich das dann natürlich nicht. Ihr habt im Endeffekt also keine echte Kontrolle über das Endergebnis. Das, was ihr euch also so schön in GIMP oder Photoshop zurechtgelegt habt, verpufft möglicherweise im Schriftdschungel. Mehr dazu, wie sich dieses Problem lösen lässt, dann aber im Anschluss.

Zunächst aber zurück zur klassischen Variante. Nachfolgend findet ihr eine typische Definition, über die das grundlegende Erscheinungsbild der Webseite angepasst wird. Über die body-Definition könnt ihr zunächst einmal die grundlegenden Schriftangaben festlegen.
body {
   font-family: Georgia, Times, "Times New Roman", serif;
   color: #000;
   font-size: 1.1em;
   line-height: 150%;
}
p {
   font-size: 1.1em;
}

Selbstverständlich könnt ihr nun noch die einzelnen Elemente der Seite gesondert gestalten. Dazu zählen beispielsweise die Überschriften, kursive Passagen usw. Denkt in diesem Zusammenhang aber wieder an das Vererbungsprinzip von CSS.
h1 {
   font-size: 1.6em;
}

 
Das Ergebnis könnte im Browser dann folgendermaßen aussehen:

Bilder



Webfonts nutzen

Das Problem bei den herkömmlichen Schriftdefinitionen liegt auf der Hand: Letztendlich könnt ihr nicht wirklich sicher sein, dass die von euch angegebene Schriftart tatsächlich beim Betrachter verfügbar ist. Die Browser wählen – sollten sie die Schriftart nicht finden – im Zweifelsfall eine, die der von euch gewünschten ähnlich ist. Eine wirkliche Kontrolle habt ihr somit über das Ergebnis natürlich nicht. Genau an diesem Punkt verschafft @font-face Abhilfe. Denn hierüber kann man explizit eine Schriftart angeben, die verwendet werden soll. Das funktioniert prinzipiell genauso wie bei Bildern. Man muss also den Pfad zur Schriftartendatei angeben.

 
In modernen Browsern werden für @font-face die sogenannten WOFF-Webfonts verwendet. Diese Fonts sind deutlich kleiner als die früher verwendeten Webfont-Formate EOT und TTF.

Eine typische @font-face-Definition sieht folgendermaßen aus:
@font-face {
   font-family: "Bitstream Vera Serif Bold";
   src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

Den Namen der zu verwendenden Schrift notiert man bei font-family. Bis hierhin gibt es also zunächst mal keine Syntaxbesonderheiten. Über src:url() wird der URL angegeben, unter dem die Webfont-Datei liegt. Wenn theoretisch die Möglichkeit besteht, dass die Schriftart auf den Rechnern der Anwender verfügbar ist, sollte man zusätzlich local angeben. Diesem local weist man den Namen der Schriftart zu.
@font-face {
   font-family: "Bitstream Vera Serif Bold";
   local: "Bitstream Vera Serif Bold";
   src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

Nach der @font-face-Definition lassen sich die Webfonts dann ganz normal verwenden.
h1 {
   font-family: "Bitstream Vera Serif Bold";
   font-size: 1.2em;
   color: #3399FF;
}

 

Hier gibt es die Webfonts beispielsweise

Stellt sich nun natürlich die Frage, woher man die betreffenden Webfont-Dateien bekommt. Google hostet beispielsweise zahlreiche dieser Webfonts auf der Seite http://www.google.com/fonts.

Diese Fonts kann man direkt über die genannte Seite einbinden.

Bilder



Ein entsprechender Aufruf sähe folgendermaßen aus:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Hinter font-family wird der gewünschte Webfont angegeben. Auf der genannten Google-Seite findet ihr diese Namen und Aufrufe. Hat man den Webfont eingebunden, kann er dann wie jede andere Schriftart angewendet werden.
body {
   font-family: 'Tangerine', serif;
   font-size: 1.2em;
}

 
Wer möchte, kann auf seiner Seite auch mehrere Webfonts nutzen. Dazu klickt man unter http://www.google.com/fonts bei den gewünschten Webfonts auf Add to Collection. Sind alle Webfonts in der eigenen Collection, ruft man im unteren Seitenbereich Use auf. Dort wird direkt eine Art Tachometer angezeigt.

Bilder



Anhand dieser Abbildung kann man die Auswirkungen erkennen, die das Einbinden der Webfonts auf die Ladezeit der Seite hat. Diese Auswirkungen sind tatsächlich messbar und nehmen mit jedem weiteren Webfont zu.

 
Wie einfach sich mehrere Webfonts, die man zuvor in seine Collection eingefügt hat, nutzen lassen, zeigt das folgende Beispiel:
<link href="http://fonts.googleapis.com/css?
family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">

Die einzelnen Webfonts werden also jeweils durch einen senkrechten Strich getrennt hintereinander notiert. Der vollständige Aufruf, der zu der gewählten Kollektion passt, wird auf der bereits genannten Use-Seite angezeigt.

Viele der Webfonts bieten sogenannte Subsets wie Latin oder Kyrillisch. Um diese explizit mit einzubinden, gibt man das gewünschte Subset als Parameterwert an.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic

Sollen mehrere dieser Subsets verwendet werden, notiert man diese jeweils durch Komma getrennt.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic

Der Einsatz dieser Webfont ist allerdings vor einem ganz anderen Hintergrund nicht unumstritten. Zunächst einmal muss beim Aufruf der Seite eine Verbindung zu einem Google-Server hergestellt werden. Umgehen lässt sich das, indem man die Webfont-Datei herunterlädt und auf seinen eigenen Server lädt. Achtet dabei aber in jedem Fall auf die Nutzungsbedingungen der Webfonts, die ihr auf diese Weise verwenden wollt.


 

Die Schriftdefinition der Beispielseite

Nachfolgend findet ihr die Schriftdefinitionen, die ich für die aktuelle Beispielseite verwenden werde:
body {
   font-family: 'Crimson Text', Helvetica, sans-serif;
   color: #444;
   text-decoration: none;
   line-height: 1.5em;
   font-size: 1.2em;
}
p { 
   font-size: 1.1em;
}
h1 {
   font-size: 1.6em;
   color: #3399FF;
}

Selbstverständlich könnt ihr zusätzliche Elemente aufnehmen. Im aktuellen Fall reicht diese Syntax aber allemal.

Bilder


Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 17:26

Vielen Dank für das interessante Tutorial

Portrait von Kiasa
  • 01.06.2015 - 19:40

Herzlichen Dank für das Tutorial!

Portrait von dlieb
  • 19.04.2015 - 19:08

Vielen Dank für Teil 45.

Portrait von Domingo
  • 16.04.2015 - 00:29

Vielen Dank!

Portrait von WolfgangDittmer
Portrait von winzling
Portrait von Kundentest
  • 15.04.2015 - 20:12

Herzlichen Dank für das Tutorial.

Portrait von Caesarion2004
  • 15.04.2015 - 20:08

Vielen Dank für das informative Tutorial.

Portrait von renate_C
  • 15.04.2015 - 19:51

Ich bedanke mich für das interessante Tutorial.

Portrait von MARIA52
  • 15.04.2015 - 18:02

Vielen Dank für das Tutorial.

Portrait von bytekiller
  • 15.04.2015 - 17:57

Sehr gut erklärt! Vielen dank!

Portrait von BOPsWelt
  • 15.04.2015 - 17:54

Vielen Dank für das Tutorial. :)

Portrait von Rapir
  • 15.04.2015 - 17:48

Klasse Tutorial! Danke!!

Portrait von rocking_sid
  • 15.04.2015 - 16:30

Vielen Dank für das sehr informative Tutorial!

Portrait von fe_web
  • 15.04.2015 - 16:04

Super - Danke für diesen weiteren Teil. MfG

Portrait von ZainaPhoto
  • 28.03.2015 - 20:34

Großen Dank für das Video.

LG Zaina

Portrait von rfg
rfg
  • 17.03.2015 - 01:07

Vielen Dank für das interessante Tutorial.

Portrait von suzana
  • 15.03.2015 - 12:08

Super, vielen Dank für das weitere informative Video.

Portrait von arko2013
  • 15.03.2015 - 10:58

Vielen Dank für das gute und interessante Video.

Portrait von renate_C
  • 15.03.2015 - 10:54

Ich bedanke mich für das lehrreiche und interessante Tutorial.

x
×
×
teststefan