CSS-Regel @font-face

❮ Vorige Nächste ❯

CSS @font-face ist eine Regel, die den Webdesignern erlaubt, Online-Schriften zu definieren, um Text auf der Webseite anzuzeigen. Damit müssen Webdesigner keine "web-safe fonts" mehr verwenden.

Wir müssen zuerst einen Namen für die Schriftart (z. B. myFirstFont) in der neuen Regel @font-face definieren und dann auf die Schriftdatei hinweisen.

Jeder Browser hat sein eigenes Format. Wir verwenden die Formate ttf, otf, eot, svg, woff.

OTF / TTF

WOFF wurde für die Reaktion OpenType Font und TrueType Font entwickelt, da diese Formate leicht (und illegal) kopiert werden können. However, OpenType verfügt jedoch über Funktionen, die viele Designer interessieren könnten (Ligaturen und dergleichen).

EOT

Eingebetteter offener Typ. Dieses Format wurde von Microsoft (den ursprünglichen Erfindern von @font-face) vor über 15 Jahren entwickelt. Es ist das einzige Format, das IE8 und darunter bei der Verwendung von @font-face erkennt.

SVG

Scalable Vector Graphics (Font). SVG ist eine Vektor-Rekonstruktion der Schriftart, die in ihrer Dateigröße deutlich reduziert und zudem ideal für den mobilen Einsatz ist. Dieses Format ist das einzige, das von der Version 4.1 und darunter von Safari für das iPhone erlaubt ist.

WOFF / WOFF2

Web Open Font Format. WOFF-Schriften, die für die Verwendung im Web entwickelt wurden und von Mozilla in Zusammenarbeit mit anderen Unternehmen entwickelt wurden, laden oft schneller als andere Formate, da sie eine komprimierte Version der Struktur verwenden, die von Schriften OpenType (OTF) und TrueType (TTF) verwendet wird.

Anfangswert	Der Anfangswert hängt vom Browser ab.
Gilt für	Alle Element. Es gilt auch für ::first-letter und ::first-line.
Geerbt	Ja
Animierbar	Nein
Version	CSS3
DOM Syntax	object.style.fontFamily = "Verdana,sans-serif";

Syntax

@font-face {
font-properties
}

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      @font-face {
      font-family: 'myFont';
      src: url('webfont.eot'); /* IE9 Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
      url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
      url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
      }
      div {
      font-family: myFont,sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Ein Beispiel für @font-face</h2>
    <div>
     Die CSS-Regel @font-face legt eine benutzerdefinierte Schriftart, mit der ein Text angezeigt werden soll, fest. Die Schriftart kann entweder von einem Remote-Server oder einer lokal installierten Schriftart auf dem eigenen Computer des Benutzers geladen werden. Wenn die Funktion local() zur Verfügung gestellt wird, die einen Fontnamen angibt, nach dem auf dem Computer des Benutzers gesucht werden soll, und der Benutzeragent eine Übereinstimmung findet, wird diese lokale Schriftart verwendet. Andernfalls wird die mit dem Befehl url() angegebene Fontressource heruntergeladen und verwendet..
    </div>
    <p>
     @font-face at-rule kann nicht nur auf der obersten Ebene eines CSS verwendet werden, sondern auch innerhalb jeder bedingten CSS-Gruppe der Regel nach.
    </p>
  </body>
</html>

Versuch es selber!

Werte

Font Descriptor	Werte	Beschreibung
font-family	name	Der Wert definiert den Namen der Schriftart und ist eine Voraussetzung.
src	URL	Der Wert definiert die URL, unter der die Schriftart heruntergeladen wird, und ist eine Voraussetzung.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Der Wert definiert, wie die Schrift gedehnt wird. Der Standardwert ist normal und optional.
font-style	normal italic oblique	Der Wert definiert, wie die Schriftart gestylt wird. Der Standardwert ist normal und optional.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Der Wert definiert die Fettschrift. Der Standardwert ist normal und optional.
unicode-range	unicode-range	Der Wert definiert den Bereich der Unicode-Zeichen, die die Schriftart unterstützt. Der Standardwert ist U + 0-10FFFF und optional.