@font-face: beliebige Schriftarten auf Webseiten verwenden

1 | 21296 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "@font-face: beliebige Schriftarten auf Webseiten verwenden" mit Ihrem Wissen!

Anzeige Hier werben

@font-face

Werte: url(), unicode-range
Standardwert: keinen
Vererbung: Ja
Kurzschreibweise:
keine
Anwendbar auf:
alle Elemente
CSS-Level
: CSS, CSS3

Mit @font-face ist es möglich beliebige Schriftarten, die sich auf dem Server befinden, einzubinden. Somit kann auf der Website eine Schriftart verwendet werden, die der Besucher nicht installiert hat.

Bild zu @font-face: beliebige Schriftarten auf Webseiten verwenden
@font-face in midori

Die meisten Schriftarten (Fonts) sind durch eine Lizenz geschützt. Sie dürfen eine Schriftart also nur verwenden, wenn sie lizenzfrei ist, oder Sie eine Ausreichende Lizenz besitzen.

Noch zu korrigieren/vervollständigen:

  • Muss unter werte font-style etc aufgelistet werden?
  • In welchem Browser kann welcher Schriftartentyp verwendet werden?
  • Was ist mit SVG Fonts? Die können auch schon irgendwo benutzt werden.
  • Kostenlose Schriftarten können, glaube ich nicht auf jeden Fall verwendet werden, man muss auch die Erlaubnis haben sie zu verbereiten.
  • Die Informationen hier einarbeiten
  • Links zu kostenlos verwendbaren Schriftarten

Werte

Nachdem mit @font-face eine Schriftart "generiert" wurde, kann sie mit fast den selben Bezeichnungen wie schon font gestaltet werden und einer Schriftendatei zugewiesen werden.

Eigenschaft
Bedeutung

Beispiel
font-family
Legt den Namen des Fonts fest
font-family: "comicserif";
font-style
Legt den Schriftstil fest. font-style: italic;
font-variant Legt die Darstellung fest, ob normal oder in kleinen großbuchstaben.
font-variant: small-caps;
font-weight Gibt an, wie Fett ein Text ausgegeben wird.
font-weight: 900;
font-stretch Beschreibt wie eng oder weit der Text ausgegeben wird.
font-weight: expanded;
font-size Legt die Schriftgröße fest.
font-size: 2.8em;
src: Gibt die Schriftdatei oder die URI des Fonts zum Download an.
src: url("http://website.de/font/comicserif.eot");

Es gibt verschiedene Schrift-Ressourcen, welche an ihren Endungen definiert werden:

Endung
Format
*.pfr
TrueDoc Portable Font Resource
*.eot Embedded OpenType
*.pfb / *.pfa PostScript Type 1
*.ttf Truetype bzw. Opentype
*.gx Trutype mit gx Suffix
*.type / *.lib Intellifont
*.otf Opentype

Kompatibilität

Firefox3.6Unterstützt4+Unterstützt
IE7Fast8Fast9Fast
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
CSS3: @font-face: Schriftart defnineren

@font-face wurde im CSS2 definiert und verschwand wieder mit CSS2.1. Nun wurde es vom W3C offiziell in CSS3 Implementiert.

Der Internet Explorer akzeptiert nur embedded-opentype (*.eot) Schriften.

Beispiel

Absatz mit comic-schriftart  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Font test</TITLE>
    <STYLE TYPE="text/css" MEDIA="screen, print">
      @font-face {
        font-family: "comicserif";
        src: url("http://site/fonts/rob-celt")
      }
      H1 { font-family: "comicserif", serif }
    </STYLE>
  </HEAD>
  <BODY>
    <H1> Dieser Textkopf wird mit dem Font comicserif ausgegeben</H1>
  </BODY>
</HTML>

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 7 Personen an der Seite "@font-face: beliebige Schriftarten auf Webseiten verwenden" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "@font-face: beliebige Schriftarten auf Webseiten verwenden" hier bearbeiten.