@font-face

von 1 Mitwirkenden:

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
Ber Bereich der Unicode Codepunkte, die in der font-face-Regel definiert sind.

Beispiele

Dieses HTML-Beispiel lädt einfach 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 Recommendation Font format specification
CSS Fonts Module Level 3 Candidate Recommendation  

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 Not supported
Nicht implementiert (siehe Bug 119490)
(Yes) Not supported (Yes) (Yes)
unicode-range

Not supported

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

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

MDN

External

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: willchen70
Zuletzt aktualisiert von: willchen70,
Seitenleiste ausblenden