Tutorials Upload

CSS > Web Fonts - Font-face

Autor: dr.allwissend
Web Fonts verwenden mit @Font-Face, und der Webseite einen besonderen Look verleihen.

Schritt 1 - Freie Fonts verwenden


Schritt 2 - Browser UnterstŁtzung

Die Browser
  • Webkit/Safari (ab 3.1)

  • Opera (ab Opera 10)

  • Mozilla/Firefox (ab Firefox 3.5)

  • Google Chrome (ab Chrome 4)


Schritt 3 - Fonts in CSS einbinden

Das schwierigste ist mit dem finden der passenden Schriftartart.

In diesem Beispiel wird die Schriftdatei vom Server geladen Beispiel1:
PHP-Code

/* einbindung der schriftart */
@font-face {
   font-family: Gavin;
¬†¬†¬†src:¬†url(Ďgavin.ttfí);
}

/* verwendung der schrift in einer class */
.meine_class {
   font-family: Gavin;
   font-size: 2em;
}


Wenn man eine weit verbreitete Schriftart verwendet, kann man die Schriftdatei auch vom lokalen System laden:
PHP-Code

@font-face {
   font-family: 'WME Webmaster Elite';
   src:
   local('WebmasterElite'),
   local('Webmaster Elite'),
¬†¬†¬†local('WME¬†Webmaster¬†Elite'),¬†/*¬†alternativen¬†wie¬†der¬†font¬†heiŖen¬†kŲnnte*/
   url('pfad/webmasterelite.ttf') format('truetype');  /* alternative wenn der font nicht lokal gefunden wird */
}


Keine Bewertung.

Dieses Tutorial wurde geschrieben von dr.allwissend - Homepage
Tags: webfonts fontface css

Kommentare

Kommentare schreiben
Um einen Kommentar zu schreiben musst du eingeloggt sein.

Noch nicht registriert?