logo

Bootstrap 4 alpha

Mega Menue Sidebar

css3area


Tutorial Webseitenerstellung mit HTML 5 und CSS 3 / Teil 3 Schriftarten - Formatierung

Im vorherigen Schritt haben wir das Grundgerüst formatiert, welchem wir im 3. Teil des Tutorials mit @font-face in der CSS Datei neue Schriftarten zuweisen, die in eigenem Ordner /fonts mitgeliefert werden müssen.

Um die Webseite mit eigenen Schriftarten formatieren zu können, ist es notwendig, diese Schriftarten für die verschiedenen Browser vorliegen zu haben. Hier bei empfiehlt es sich diese Versionen generieren zu lassen. Ich empfehle dazu den @font-face Kit Generator "Font Squirrel".Hierbei lädt man seine eigene Schriftart über das Online-Tool, läßt die verschiedenen Versionen generieren und lädt sie auf seinen Rechner. Diese Versionen müssen dann in einen Ordner, z.B. /fonts zur Webseite hochgeladen werden.

Schriftversionen:

  • *.eot: Spezielles Format für Internetexplorer Versionen IE8-8
  • *.woff: Web Only Font Format (Crossbrowser Format IE9+, FF3.6+, Chrome5+)
  • *.svg: XML Format für IOS mobile Endgeräte
  • *.tff: Die True Type File (zur Darstellung der Schrift auf dem Rechner)

Es werden 2 verschiedene (zusätzliche) Schriften aufgenommen und in der CSS Datei angegeben.

Bitte in der Stylesheet-Datei folgendes Suchen:


* html .clearfix { zoom: 1 } /* IE6 */
*:first-child+html .clearfix { zoom: 1 } /* IE7 */

...und folgenden Code danach einfügen


/* @FONT-FACE */
@font-face {
    font-family: 'Colaborate-RegularRegular';
	src: url('fonts/ColabReg-webfont.eot');
	src: local('☺'), 
	url('fonts/ColabReg-webfont.woff') format('woff'), 
	url('fonts/ColabReg-webfont.ttf') format('truetype'), 
	url('fonts/ColabReg-webfont.svg#webfont') format('svg');
}

@font-face {
	font-family: 'HighlandGothicLightFLFRegular';
	src: url('fonts/HighlandGothicLightFLF-webfont.eot');
	src: local('☺'), 
	url('fonts/HighlandGothicLightFLF-webfont.woff') format('woff'), 
	url('fonts/HighlandGothicLightFLF-webfont.ttf') format('truetype'), 
	url('fonts/HighlandGothicLightFLF-webfont.svg#webfont') format('svg');
}

Mit font-family wird der Name der Schriftart angegeben

Mit src:url wird der Pfad zu den Schriftdateien des Projektes angegeben.

Mit src: local und dem Smilie wird auf dem System nach der betreffenden Schriftart gesucht und falls doppelt vorhanden (ähnliche Schreibweisen) auf die src:url verwiesen.

Die nachfolgenden url('fonts/MyFont.Dateiendung') wird auf die verschiedenen Dateien im Projekt verwiesen.

Folgenden Code im body stylesheet suchen...

font: 12px/18px Verdana, Arial, Helvetica, sans-serif;

...und durch folgenden Code ersetzen:

font: 12px/18px Corbel, Arial, Helvetica, sans-serif;

Folgenden Code suchen...

h1 { font: 24px/36px Verdana, Arial, Helvetica, sans-serif;}

...und durch folgenden Code ersetzen

h1 { font: 24px/36px Colaborate-RegularRegular, "Trebuchet MS", Arial,
 Helvetica, sans-serif }

Folgenden Code suchen...

hgroup h1 {
	font: 40px/54px Verdana, Arial, Helvetica, sans-serif;
}

...und durch folgenden Code ersetzen

hgroup h1 {
	font: 40px/54px HighlandGothicLightFLFRegular, "Lucida Sans Unicode",
	"Lucida Grande", sans-serif;
}

Folgenden Code suchen...

hgroup h2 {
	font: 14px/20px Verdana, Verdana, Arial, Helvetica, sans-serif;
}

...und durch folgenden Code ersetzen

hgroup h2 {
	font: 14px/20px Colaborate-RegularRegular, "Lucida Sans Unicode",
	"Lucida Grande", sans-serif;
}

 

Preview/Code
Modal Modal Modal Extern
CSS HTML Preview Preview

Dies wäre der 3. Teil des Tutorials indem wir der vorformatierten Seite des 2.Teils die Schriften hinzugefügt haben. Als nächsten Schritt werden nun den einzelnen Bereichen Hintergründe ohne Grafiken via CSS hinzufügen.

Tags

HTML5 META Artikel Doctype Header Footer