Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

@font-face

Zusammenfassung

Die @font-face CSS at-Regel erlaubt Web-Autoren, Texte mit spezifischen Schriftarten (Fonts), die auf dem jeweiligen Webserver abgelegt sind,  darzustellen. Durch die @font-face Regel sind Web-Autoren nicht mehr länger auf die eingeschränkte Zahl an Fonts angewiesen, die auf den Computern von Usern installiert ist. Die @font-face at Regel lässt sich nicht nur in der oberen CSS-Ebene einbinden, sondern auch in irgendeiner CSS conditional-group at-Regel.

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.

Syntax

@font-face {
  [font-family: <family-name>;]?
  [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
  [unicode-range: <urange>#;]?
  [font-variant: <font-variant>;]?
  [font-feature-settings: normal|<feature-tag-value>#;]?
  [font-stretch: <font-stretch>;]?
  [font-weight: <weight>];
  [font-style: <style>];
}

Beschreibungen

family-name
Steht für den Namen der Schriftart, der dann als font-face-Wert benutzt werden kann.
src
URL der Schriftart-Datei, entweder auf dem jeweiligen entfernten Webserver im root-Ordner, oder lokal (im Fonts-Ordner) auf dem jeweiligen Computer des Betrachters in der Schreibweise local("Font Name"). Man kann durch die  local()Syntax die gewünschte Schriftart lokal suchen und ansprechen. Wenn der gewünschte Font auf dem jeweiligen Computer nicht gefunden wird, werden andere Quellen, die im CSS angegeben sind,  durchsucht.
font-variant
Ein font-variant Wert.
font-stretch
Ein font-stretch Wert.
font-weight
Ein font weight Wert.
font-style
Ein font style Wert.
unicode-range
Der Bereich der Unicode Codepunkte, die in der @font-face Regel definiert sind.

Beispiele

Dieses HTML-Beispiel lädt einen downloadbaren Font aus einer externen Website, der dann im gesamten Body des Dokuments angewendet wird.

Livevorschau

<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }
    
    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

Im nächsten Beispiel wird die lokal installierte Kopie von "Helvetica Neue Bold" verwendet. Sollte diese nicht auf dem System des Users installiert sein (zwei verschiedene Schreibweisen des Fonts werden ausprobiert), wird stattdessen der downloadbare Font "MgOpenModernaBold.ttf" benutzt:

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

Anmerkungen

  • Gecko erlaubt die Verwendung von Webfonts nur, wenn diese sich in der gleichen Domain befinden, es sei denn, man benutzt die HTTP access controls, um die Einschränkung aufzuheben.
  • Anmerkung: Da keine MIME-Typen für TrueType, OpenType and Web Open File Format (WOFF) Schriftarten definiert sind, wird der MIME type der Font-Datei nicht berücksichtigt.
  • When Gecko displays a page that uses web fonts, it initially displays text using the best CSS fallback font available on the user's computer while it waits for the web font to finish downloading.  As each web font finishes downloading, Gecko updates the text that uses that font.  This allows the user to read the text on the page more quickly.

Specifications

Specification Status Comment
WOFF File Format 1.0
Die Definition von 'WOFF font format' in dieser Spezifikation.
Empfehlung Font format specification
CSS Fonts Module Level 3
Die Definition von '@font-face' in dieser Spezifikation.
Anwärter Empfehlung  

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 3.5 (1.9.1) 4.0 4.0 10.0 3.1
WOFF 3.5 (1.9.1) 6.0 9.0 11.10 5.1
SVG Font Nicht unterstützt
Nicht implementiert (siehe Bug 119490)
(Ja) Nicht unterstützt (Ja) (Ja)
unicode-range

Nicht unterstützt

(Ja) 9.0 (Ja) (Ja)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Basic support (Ja) 1.0 (1.9.1) ? Nicht unterstützt 10.0 (Ja)
WOFF 4.4 5.0 (5.0) 10.0 Nicht unterstützt 11.0 5.0
SVG fonts ? Nicht unterstützt
Nicht implementiert (siehe Bug 119490)
? Nicht unterstützt 10.0 (Ja)
unicode-range ? Nicht unterstützt ? Nicht unterstützt ? (Ja)

Notes

  • Support of the Embedded OpenType font format is not included in the compatibility table because it is a proprietary feature. Prior to IE 9.0, IE supported only this format.
  • TrueType and OpenType are not included because they are superseded by WOFF.

See also

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: fscholz, dio, willchen70
 Zuletzt aktualisiert von: fscholz,