Erstellen Sie Schriftdateien in .WOFF2, .WOFF und optional .ttf/.OTF -Formaten mithilfe von Tools wie Font Squirrel, um die ordnungsgem??e Lizenzierung zu gew?hrleisten. 2. Definieren Sie @font-face-Regeln in CSS mit Schriftfamilie, SRC-Pfaden, Formatnoten und Schriftart-Display: Swap auf die Sichtbarkeit w?hrend der Last und erstellen Sie separate Regeln für verschiedene Gewichte oder Stile. 3. Wenden Sie die benutzerdefinierte Schriftart in CSS mit dem definierten Namen der Schriftfamilie mit Fallbacks an. 4. Optimieren Sie die Leistung unter Verwendung von WOFF2, begrenzt Schriftartenvariationen, Unterlassungszeichen, Hosting auf einem schnellen CDN und vorl?dt kritische Schriftarten mit Crossorigin -Attribut. Dies gew?hrleistet eine konsistente, effiziente und rechtlich konforme kundenspezifische Typografie über Ger?te hinweg.

Mit @font-face k?nnen Sie benutzerdefinierte Schriftarten direkt in Ihre Website einbetten, sodass die Besucher Ihre bevorzugte Typografie sehen, ohne die auf ihrem Ger?t installierte Schriftart zu ben?tigen. Hier erfahren Sie, wie man es richtig macht.

1. Bereiten Sie Ihre Schriftart Dateien vor

Stellen Sie zun?chst sicher, dass Sie die Schriftartdateien in mehreren Formaten haben. Verwenden Sie für breite Browserkompatibilit?t:

• .woff2 (moderne Browser, kleinere Dateigr??e)
• .woff (weithin unterstützt)
• .ttf oder .otf (optionaler Fallback)
• .eot (Verm?chtnis, dh Unterstützung, jetzt selten ben?tigt)

Sie k?nnen Schriftarten mithilfe von Tools wie dem Generator von Font Squirrel konvertieren.

?? Verwenden Sie nur Schriftarten Sie haben die Lizenz, sich in das Web einzubetten.

2. Definieren Sie die @font-face-Regel

Fügen Sie die @font-face Regel in Ihre CSS-Datei (oder in einem <style></style> -Tag) hinzu:

 @font-face {
  Schriftfamilie: 'CustomFont';
  SRC: URL ('Schriftarten/CustomFont.Woff2') Format ('Woff2'),
       URL ('Schriftarten/CustomFont.Woff') Format ('Woff');
  Schriftgewicht: normal;
  Schriftstil: normal;
  Schriftart-Display: Swap; / * Stellt sicher, dass der Text w?hrend der Last sichtbar bleibt */
}

• font-family : Der Name, den Sie sp?ter in Ihrem CSS verwenden.
• src : Pfade zu Ihren Schriftart Dateien, mit Formatnoten.
• font-weight / font-style : Geben Sie an, ob dies fett, kursiv ist, usw.
• font-display: swap : verhindert unsichtbarer Text w?hrend des Ladens (FOIT).

Sie k?nnen mehrere @font-face -Regeln für verschiedene Gewichte oder Stile definieren:

 @font-face {
  Schriftfamilie: 'CustomFont';
  SRC: URL ('Schriftarten/CustomFont-Bold.woff2') Format ('Woff2');
  Schriftgewicht: fett;
  Schriftstil: normal;
}

3. Verwenden Sie die benutzerdefinierte Schriftart in Ihren Stilen

Wenden Sie nach dem Definieren die Schriftart wie einen beliebigen Standard an:

 K?rper {
  Schriftfamilie: 'CustomFont', Arial, Sans-Serif;
}

Der Browser l?dt und verwendet Ihre benutzerdefinierte Schriftart. Wenn es fehlschl?gt, f?llt es auf Arial zurück.

4.. Optimieren Sie die Leistung

Benutzerdefinierte Schriftarten k?nnen Ihre Website verlangsamen, wenn sie nicht gut behandelt werden:

• Verwenden Sie WOFF2, wenn m?glich - es ist komprimiert und effizient.
• Begrenzen Sie die Anzahl der von Ihnen geladenen Schriftgewichte/Stile.
• Betrachten Sie Subset -Schriftarten (z. B. nur lateinische Zeichen), wenn Sie keinen vollst?ndigen Unicode ben?tigen.
• Host -Schriftarten auf derselben Domain oder einem schnellen CDN.

Sie k?nnen auch kritische Schriftarten vorladen:

 <link rel = "preload" href = "fonts/customfont.woff2" as = "font" type = "font/woff2" crossorigin>

? Verwenden Sie crossorigin auch wenn dieselbe Dom?ne - sie ist für eine Schriftvorspannung erforderlich.

Das war's. Mit @font-face haben Sie die volle Kontrolle über Ihre Typografie. Denken Sie nur an Lizenzierung, Formate und Leistung.

Das obige ist der detaillierte Inhalt vonWie benutze ich @font-face für benutzerdefinierte Schriftarten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!