Wie erstelle ich eine Homepage? (Teil 16 – Schriften mit CSS einbinden)

Wie schon im letzten Artikel angekündigt, werden wir heute mit CSS Schriften bzw. Schriftfamilien einbinden. Es wird also festgelegt, mit welcher Schrift und welchem Schnitt (fett) und welchem Stil (kursiv) bestimmte Bereiche der Webseite formatiert werden. Änderungen der Farbe haben wir bereits mit dem CSS-Befehl “color” und die Schriftgröße mit “font-size” vollzogen. Nun lernen wir noch “font-family”, “font-weight” und “font-style” kennen.

Im Kapitel 6 haben wir uns schon mit der Schrift im Allgemeinen beschäftigt und festgestellt, dass man für die Nutzung von Schriftfamilien berücksichtigen muss, dass nicht jede Schrift auf dem Rechner des Betrachters der Webseite installiert ist. Es macht also keinen Sinnn, eine besondere Schrift zu wählen, weil die Gefahr sehr groß ist, dass diese gar nicht dargestellt wird. Dreamweaver (oder andere Editoren) bieten daher nur sogenannte Schriftgruppen an, bei denen sicher ist, dass sie auch auf jedem PC vorkommt. Der schon erwähnte CSS-Befehl  “font-family” wird so eingesetzt:

h1 {
font-family: Verdana, Arial, sans-serif;
}

Die erstgenannte Schrift (Verdana) wird standardmäßig benutzt. Nur wenn diese auf dem Rechner nicht installiert ist, wird die zweite Schrift (Arial) gewählt. Sollte diese auch fehlen, wird automatisch auf eine serifenlose Schrift zurückgegriffen. Wer in den vorigen Kapiteln aufgepasst hat, weiss, dass mit dieser Programmierung nur die Überschrift erster Ordnung (h1) formatiert wird ;-)

Die Schriftschnitte können wir nun noch mit “font-weight” und “font-style” regeln:

h1 {
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
font-style: italic;
}

Übrigens kann man diese Auszeichnungen auch über HTML erzeugen: <strong> für bold und <em> für kursiv.

Nun wenden wir das gelernte auf unsere bestehende Datei an. Absatztext (p) soll in 12px Verdana formatiert werden. Die Navigation in 14px ebenfalls mit Verdana, aber kursiv. Überschriften in 18px, aber nicht in fett, sondern normal:

h1 {
font-family: Verdana, Arial, sans-serif;
font-weight: normal;
font-size:18px;
}
p {
font-family: Verdana, Arial, sans-serif;
font-size:12px;
}
#navigation a {
font-family: Verdana, Arial, sans-serif;
font-size:14px;
font-style:italic;
}

Im Code wurde eine Besonderheit eingesetzt, die bisher noch nicht erklärt worden ist (fett gedruckt hervorgehoben). Es wurde vor das “a” noch der ID-Selektor #navigation geschrieben. Das bedeutet, dass diese Formatierung für “a” nur dann greift, wenn ein “a” innerhalb eines ID-Selektors  namens navigation steht. Mit anderen Worten: Diese Formatierung verändert nur Hyperlinks innerhalb der Navigation!

Unser Ergebnis:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Meine erste Seite</title>
<style>
body {
    background-color:#CCCCCC; 
    color:#011C26; 
    background-image: URL(496.png)}
#container {
    border:1px solid black; 
    width:800px; 
    margin:auto; 
    box-shadow:8px 8px 8px #000000;}
#logo {
    padding:25px 0 25px 10px;
    background-color:#A6242F;}
#navigation {
    padding:5px; 
    width:150px;
    height:350px;
    float:left;
    background-color:#C0B18F;}
#inhalt {
    padding:5px 5px 5px 170px; 
    height:350px;
    background-color:#D9CEAD;}
h1 {
    font-family: Verdana, Arial, sans-serif;
    font-weight: normal;
    font-size:18px;
    }
p {
    font-family: Verdana, Arial, sans-serif;
    font-size:12px;
    }
#navigation a {
    font-family: Verdana, Arial, sans-serif;
    font-size:14px;
    text-decoration:none; 
    color:#BF2633; 
    font-style:italic;
    }
ul {
    list-style-type:none;}

</style>
</head>

<body>
<div id="container">
<div id="logo"> <img src="yoga.png" alt="Logo vom Yoga-Studio - feines Yoga" /></div>
<div id="navigation"> 
<ul>
    <li><a href="datei1.html">Punkt 1 </a></li>
    <li><a href="datei2.html">Punkt 2 </a></li>
    <li><a href="datei3.html">Punkt 3 </a></li>
    <li><a href="mailto:meinName@meineDomain.de">Mail an mich </a></li>
</ul>
</div>
<div id="inhalt"> 
<h1>Willkommen im feinen Yoga-Studio!</h1>
<p>Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
</p>    
</div>
</div>
</body>
</html>

Visuell:

Layout mit neuer Schriftformatierung

Layout mit neuer Schriftformatierung

Als letztes werden wir jetzt eine Schrift benutzen, die wir über eine Datei (bzw. über mehrere Dateien für unterschiedliche Betriebssysteme) formatieren. Über CSS wird also eine Datei für die Schriftdarstellung angesprochen. Fertige Schriftpakete findet man zum Beispiel hier:

http://www.fontsquirrel.com/fontface

Dort habe ich das Paket “Tangerine” angewählt und das font-face-kit als zip-Datei runtergeladen. Entpackt findet man folgendes:

entpacktes Schriftpaket

entpacktes Schriftpaket

Die Dateien .svg, .ttf, .eot, .woff sind die notwendigen Schriftdateien. Sie werden je nach bentzten Betriebssystem und Browser für die Darstellung der Schrift herangezogen. In der .css-Datei ist die Stilanweisung hinterlegt:

@font-face {
    font-family: 'TangerineRegular';
    src: url('Tangerine_Regular-webfont.eot');
    src: url('Tangerine_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Tangerine_Regular-webfont.woff') format('woff'),
         url('Tangerine_Regular-webfont.ttf') format('truetype'),
         url('Tangerine_Regular-webfont.svg#TangerineRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TangerineBold';
    src: url('Tangerine_Bold-webfont.eot');
    src: url('Tangerine_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Tangerine_Bold-webfont.woff') format('woff'),
         url('Tangerine_Bold-webfont.ttf') format('truetype'),
         url('Tangerine_Bold-webfont.svg#TangerineBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

Nun noch die Zuweisung der Schrift zum Beispiel auf h1:

h1 {
font-family:'TangerineRegular';
font-size:40px /*Die Schrift von 18px auf 40px erhöhen,
sonst ist sie zu klein */
}

Damit das Beispiel auch wirklich funktioniert, müssen wir darauf achten, dass die Schriftdateien alle im gleichen Ordner wie unsere html-Datei liegen! Übrigens wurde mit /* ein Kommentar eingeleitet, der die Schriftvergrößerung erklärt – mit */ wird er wieder geschlossen. Diese Befehle gelten aber nur innerhalb von CSS!

Hier das Ergebnis:

Layout mit eingebundener CSS-Schrift

Layout mit eingebundener CSS-Schrift

Download des Codes

In Teil 17 von “Wie erstelle ich eine Homepage” geht es um die Anwendung von Sprites. Sprites sind Grafiken, die mit CSS als Hintergrundbild eingebunden werden und bei Mouse-Over verschoben werden. Theoretisch lassen sich die Bilder mit CSS auch einfach austauschen, in der Praxis verursacht das jedoch leichte Ruckler beim Mouse-Over, weil das zweite Bild erst noch geladen werden muss. Diese Manko gibt es bei Sprites nicht. Lesen Sie hier wie das im Einzelnen gemacht wird..

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>