CSS-Regel @font-face

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>

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.

Browser-Support

chrome edge firefox safari opera
4.0+ 12.0+ 3.5+ 3.2+ 10.0+

Übe dein Wissen

In welchen Situationen wird die @font-face CSS-Regel verwendet?
Finden Sie das nützlich?