Schriftarten sind ein wichtiges Designelement, das einen wichtigen Eindruck auf eine Website vermitteln kann. Glücklicherweise ist es mit dem Aufkommen von CSS viel einfacher geworden, Schriftarten frei auszuwählen als zuvor. Die Aufgabe, die gewünschten Schriftarten mit der Website zu verbinden, mag nicht einfach erscheinen, aber es ist wirklich sehr einfach, dies mit "@font-face" zu tun.
Mit Webschriftarten können Sie die Schriftart auswählen, die auf Ihrer Website angezeigt wird, unabhängig davon, ob der Benutzer eine hat oder nicht. Dies hilft, Ihre Website für Besucher einzigartiger und attraktiver zu machen.
Das Wichtigste beim Verbinden von Schriftarten ist, sicherzustellen, dass die Lizenz zur Verwendung der Schriftart die Websites der Schriftart zulässt. Stellen Sie sicher, dass Sie über die entsprechenden Lizenzrechte verfügen, bevor Sie mit dem Anschließen von Schriftarten beginnen.
Schritte zum Verbinden von Schriftarten in css @font-face:
Schriftarten spielen eine wichtige Rolle bei der visuellen Gestaltung von Webseiten und können einen einzigartigen Stil und eine einzigartige Stimmung erzeugen. Wenn Sie eine benutzerdefinierte Schriftart für Ihre Website benötigen, können Sie css @font-face verwenden, um sie zu verbinden. Hier sind einige Schritte, um Schriftarten mit @font-face zu verbinden:
1. Bereiten Sie die Schriftdateien vor: Sie sollten Schriftartdateien in Formaten haben .ttf, .woff oder .woff2. Es wird empfohlen, alle drei Formate zu verwenden, um die maximale Anzahl von Browsern zu unterstützen.
2. Erstellen Sie ein neues Verzeichnis in Ihrem Projekt, z. B. "fonts", und legen Sie die Schriftdateien dort ab.
3. Erstellen Sie in Ihrer CSS-Datei einen neuen Stilblock für @font-face. Zum Beispiel:
@font-face
4. Ersetzen Sie den Wert von font-family durch den Namen, den Sie für Ihre Schriftart verwenden möchten.
5. Geben Sie den Pfad zu den Schriftartdateien in der src-Eigenschaft an. Wenn Sie beispielsweise Dateien im Verzeichnis "fonts" abgelegt haben, sieht der Pfad folgendermaßen aus: url('fonts/MyCustomFont.ttf').
6. Verwenden Sie die Funktion format(), um Schriftdateiformate anzugeben. Stellen Sie sicher, dass Sie alle Schriftdateiformate angeben, die Sie verwenden möchten.
7. Geben Sie in Ihrer CSS-Regel für Elemente, die eine neue Schriftart anwenden möchten, font-family mit dem Namen an, den Sie in @font-face angegeben haben. Zum Beispiel:
body8. Speichern und laden Sie die aktualisierten CSS-Dateien und Schriftarten auf Ihren Server hoch.
Ihre Website verwendet jetzt die neuen Schriftarten, die in @font-face angegeben sind. Stellen Sie sicher, dass Sie die Website in verschiedenen Browsern überprüfen, um zu sehen, wie Schriftarten in verschiedenen Umgebungen angezeigt werden.
Schriftwahl
Zuerst müssen Sie die allgemeine Art der Schriftart bestimmen - ob es sich um eine Sans-Serif oder eine Serif-Schriftart handelt. Sie können dann eine bestimmte Schriftart unter Berücksichtigung ihres Stils und ihrer Stimmung auswählen. Zum Beispiel kann eine romantische Website Kursivschrift verwenden, während eine ernsthafte Website eine klassische Serifenschriftart ist.
Denken Sie daran, dass für die ausgewählte Schriftart alle gewünschten Zeichen (z. B. Fett, kursiv) und Sprachzeichen verfügbar sein müssen. Es lohnt sich auch zu überprüfen, ob die ausgewählte Schriftart auf allen Geräten und Browsern unterstützt wird.
Bei der Auswahl einer Schriftart sollten Sie auch ihr Gewicht und ihre Größe berücksichtigen. Dünne Schriftarten können auf einigen Bildschirmen zu dünn sein, und große Schriftarten passen nicht auf kleine Bildschirme mobiler Geräte.
Es ist wichtig, sich daran zu erinnern, dass Schriftarten die Benutzererfahrung einer Website stark beeinflussen können. Eine schlecht lesbare oder nicht mit dem Stil übereinstimmende Schriftart kann den Benutzern Unbehagen bereiten und sie davon abhalten, die Website zu besuchen.
Daher lohnt es sich, sich bei der Auswahl einer Schriftart die Zeit zu nehmen, sie sorgfältig zu studieren und auf verschiedenen Geräten zu testen.
Abrufen von Schriftdateien
Bevor Sie Schriftarten mithilfe von CSS und dem @font-face-Attribut in eine Webseite einbinden können, müssen Sie die zu verwendenden Schriftdateien abrufen.
Schriftarten können in verschiedenen Formaten bereitgestellt werden, z. B. TrueType (TTF), OpenType (OTF), Web Open Font Format (WOFF), Web Open Font Format 2.0 (WOFF2) usw. Es wird empfohlen, die Formate WOFF und WOFF2 für die Verwendung auf Webseiten zu verwenden, da sie von den Browsern besser unterstützt werden und ein schnelleres Laden ermöglichen.
Außerdem können Sie für jede Schriftart verschiedene Dateioptionen erhalten, z. B. Regular (Standardversion), Bold (Fett), Italic (kursiv) usw. Dadurch können Sie verschiedene Textstile für verschiedene Seitenelemente festlegen.
Auf diesen Websites können Sie die gewünschte Schriftart auswählen, die gewünschten Stile angeben und das Archiv mit den Schriftdateien herunterladen.
Nachdem Sie die Schriftdateien erhalten haben, müssen Sie sie auf den Server hochladen, auf dem Ihre Webseite gespeichert ist. Danach können Sie die Schriftarten mit CSS und dem @font-face-Attribut verbinden.
Beispiel zum Abrufen von Schriftdateien:
1. Rufen Sie die Google Fonts-Website auf (https://fonts.google.com /).
2. Suchen Sie die gewünschte Schriftart und wählen Sie die gewünschten Stile aus (z. B. Regular und Italic).
3. Klicken Sie auf die Schaltfläche "Select This Font".
4. Klicken Sie im sich öffnenden Fenster auf die Registerkarte "Embed"
5. Kopieren Sie im Abschnitt "@import" den Code, um die Schriftart zu verbinden.
6. Gehen Sie zur Seite "Anpassen" und wählen Sie die gewünschten Schriftdateioptionen aus (WOFF, WOFF2).
7. Klicken Sie auf die Schaltfläche "Download" und laden Sie das Archiv mit den Schriftdateien herunter.
Jetzt haben Sie Schriftdateien, mit denen Sie sich mit CSS und dem @font-Face-Attribut mit einer Webseite verbinden können.
Erstellen eines Verzeichnisses für Schriftdateien
Um Schriftarten mithilfe der @font-Face-Regel erfolgreich in CSS zu verbinden, müssen Sie ein Verzeichnis erstellen, in dem die Schriftdateien gespeichert werden. Auf diese Weise können Sie die Dateistruktur auf Ihrer Website organisieren, um die Schriftarten klarer und einfacher zu verwalten.
Normalerweise wird ein Verzeichnis für Schriftarten im Stammverzeichnis Ihrer Website erstellt. Sie können dieses Verzeichnis beliebig benennen, z. B. "fonts", "font-files" oder "webfonts".
Innerhalb des Verzeichnisses können Sie zusätzliche Unterverzeichnisse für jede Schriftart einzeln erstellen. Wenn Sie beispielsweise zwei Schriftarten haben, Arial und Times New Roman, können Sie die folgende Verzeichnisstruktur erstellen:
- fonts
- arial
- arial.woff
- arial.woff2
- arial.ttf
- times-new-roman.woff
- times-new-roman.woff2
- times-new-roman.ttf
Jedes Unterverzeichnis für eine Schriftart muss alle Versionen der Schriftdatei enthalten, z. B. .woff, .woff2 und .ttf. Wenn Sie unterschiedliche Dateiversionen haben, können Sie sicherstellen, dass Schriftarten in verschiedenen Browsern unterstützt werden, damit Ihre Website auf allen Geräten gleich aussieht.
Eine Schriftart in CSS verbinden
Wenn Sie eindeutige Schriftarten in eine Webseite einfügen, können Sie ihr Aussehen verbessern und werden häufig zum Erstellen einer Marke oder zum Hinzufügen eines Spezialeffekts verwendet. Dazu können Sie die CSS-Eigenschaft @font-face verwenden.
Um eine Schriftart in Ihre Webseite einzubinden, müssen Sie eine Datei mit der Erweiterung herunterladen.woff oder .woff2. Diese Schriftformate sind am besten mit modernen Browsern kompatibel.
Nachdem Sie die Datei heruntergeladen haben, müssen Sie sie in einem Unterverzeichnis mit Schriftarten auf Ihrem Server ablegen, z. B. im Ordner "fonts". Dann können Sie beginnen, die Schriftart in Ihrer CSS-Datei anzuhängen.
Um zu beginnen, können Sie den Namen einer Schriftart definieren, die verwendet wird, um diese bestimmte Schriftart mit @font-face zu bezeichnen. Im folgenden Beispiel wird die Schriftart "MyFont" genannt:
@font-faceIn diesem Code definieren wir einen neuen @font-face-Selektor, der eine font-family-Eigenschaft namens "MyFont" hat. Dann geben wir den Pfad zu den Schriftartdateien mithilfe der src-Eigenschaft an. Beachten Sie, dass wir zwei verschiedene Schriftformate angeben - .woff2 und .woff, um die Kompatibilität mit verschiedenen Browsern zu gewährleisten.
Nachdem die Schriftart mit @font-face definiert wurde, können Sie sie auf diese Weise in Ihrem CSS-Code verwenden:
body
In diesem Beispiel geben wir an, dass die Schriftart "MyFont" für den Textinhalt des Elements verwendet werden soll . Wenn der Benutzer die Schriftart "MyFont" nicht installiert hat, wird die nächste Schriftart in der Liste mit Priorität, Arial, verwendet. Selbst wenn Arial nicht verfügbar ist, wird die Standardschriftart sans-serif verwendet.
Jetzt wissen Sie, wie Sie eine Schriftart mit @font-face in CSS einbinden und wie Sie sie auf Ihrer Webseite verwenden. Dadurch können Sie das Aussehen von Schriftarten auf Ihrer Website steuern und einen einzigartigen visuellen Eindruck bei Ihren Besuchern erzeugen.
Formatieren von Text mit einer verbundenen Schriftart
Wenn Sie Schriftarten mithilfe der CSS-Regel von @font-face verbinden, können Sie die Möglichkeiten zum Formatieren von Text auf einer Webseite erheblich erweitern. Nachdem Sie die Schriftart angeschlossen haben, können Sie sie in CSS-Eigenschaften für verschiedene Elemente verwenden.
Zuerst müssen Sie die Schriftart auf den Webserver laden und den Pfad dazu in der CSS-Regel @font-face angeben. Erstellen Sie dazu einen Ordner "fonts" im Stammverzeichnis Ihres Projekts und kopieren Sie die heruntergeladene Schriftart in diesen Ordner.
Hier ist ein Beispiel für die CSS-Regel @font-face:
@font-face font-family: 'MyFont'; src: url('fonts/myfont.ttf') format('truetype'); > In diesem Beispiel wird eine Schriftart mit dem Namen 'MyFont' verwendet, die aus der Datei 'myfont' geladen wird.ttf' im TrueType-Format.
Sobald die Schriftart eingebunden ist, kann sie in CSS-Eigenschaften für verschiedene Elemente verwendet werden. Fügen Sie beispielsweise die folgende CSS-Regel hinzu, um dem Titeltext die Schriftart 'MyFont' hinzuzufügen:
h1 font-family: 'MyFont', sans-serif; font-size: 24px; color: #333; > In diesem Beispiel wird die Schriftart 'MyFont' auf Elemente angewendet h1 mit zusätzlichen Stilen für Textgröße und -farbe.
Auf die gleiche Weise können Sie eine verbundene Schriftart auf andere Elemente wie Absätze anwenden (p), Listen (ul, ol), Tabellen (table), usw.
Wenn Sie den Text mithilfe einer angeschlossenen Schriftart stylen, erzielen Sie ein einzigartiges visuelles Design der Webseite und erstellen ein einzigartiges Design.
Schriftverbindung für verschiedene Gewichte und Stile
Wenn Sie eine Schriftart mit @font-face in CSS verbinden, können Sie verschiedene Gewichte und Stile angeben, die auf einer Webseite verwendet werden sollen. Dies ermöglicht eine flexiblere und schönere Darstellung des Textes.
Um eine Schriftart mit unterschiedlichen Gewichten und Stilen zu verbinden, müssen Sie für jedes Gewicht und jeden Schriftstil einen separaten @font-face-Block erstellen.
Hier ist ein Beispiel für CSS-Code, um eine Schriftart mit unterschiedlichen Gewichten und Stilen zu verbinden:
Stil Gewicht CSS-Code Gewöhnlich 400 @font-face < font-family: 'Мой_шрифт'; src: url('путь_к_шрифту/шрифт.woff2') format('woff2'), url('путь_к_шрифту/шрифт.woff') format('woff'), url('путь_к_шрифту/шрифт.ttf') format('truetype'); font-weight: 400; font-style: normal; > Fett 700 @font-face < font-family: 'Мой_шрифт'; src: url('путь_к_шрифту/шрифт-bold.woff2') format('woff2'), url('путь_к_шрифту/шрифт-bold.woff') format('woff'), url('путь_к_шрифту/шрифт-bold.ttf') format('truetype'); font-weight: 700; font-style: normal; > Kursive 400 @font-face < font-family: 'Мой_шрифт'; src: url('путь_к_шрифту/шрифт-italic.woff2') format('woff2'), url('путь_к_шрифту/шрифт-italic.woff') format('woff'), url('путь_к_шрифту/шрифт-italic.ttf') format('truetype'); font-weight: 400; font-style: italic; > Fett kursiv 700 @font-face < font-family: 'Мой_шрифт'; src: url('путь_к_шрифту/шрифт-bold-italic.woff2') format('woff2'), url('путь_к_шрифту/шрифт-bold-italic.woff') format('woff'), url('путь_к_шрифту/шрифт-bold-italic.ttf') format('truetype'); font-weight: 700; font-style: italic; > Nachdem Sie die @font-face-Blöcke für jeden Schriftstil und jede Schriftgröße erstellt haben, können Sie die angegebenen Stile und Gewichte im CSS-Code verwenden:
Jetzt können Sie die Klassen normal, bold, italic und bold-italic verwenden, um verschiedene Schriftstile und Gewichtungen auf einer Webseite anzuwenden.
Überprüfen der Schriftverbindung in verschiedenen Browsern
Nachdem Sie Ihre eigene Schriftart mit der CSS-Regel von @font-face verbunden haben, ist es wichtig sicherzustellen, dass sie in verschiedenen Browsern korrekt angezeigt wird. Jeder Browser kann Schriftarten unterschiedlich interpretieren und anzeigen, daher ist es notwendig, Ihre Website auf verschiedenen Plattformen zu testen.
Sie können die folgende Tabelle verwenden, um zu überprüfen, ob die Schriftart in verschiedenen Browsern verbunden ist:
Browser Ergebnis Google Chrome Die Schriftart sollte in allen Chrome-Versionen korrekt und gleich angezeigt werden. Mozilla Firefox Die Schriftart sollte auf allen Firefox-Versionen korrekt und gleich angezeigt werden. Safari Die Schriftart sollte auf allen Safari-Versionen korrekt und gleich angezeigt werden. Microsoft Edge Die Schriftart sollte auf allen Edge-Versionen korrekt und gleich angezeigt werden. Internet Explorer Internet Explorer hat einige Einschränkungen beim Arbeiten mit Schriftarten. Stellen Sie sicher, dass Ihre Schriftart in der Version des Browsers unterstützt wird, die Sie unterstützen möchten, und dass sie korrekt angezeigt wird. Opera Die Schriftart sollte auf allen Opera-Versionen korrekt und gleich angezeigt werden. Vergessen Sie nicht, dass es auch wichtig ist, die Anzeige der Schriftart auf verschiedenen Betriebssystemen wie Windows, macOS und Linux zu überprüfen. Jedes Betriebssystem kann seine eigenen Besonderheiten bei der Arbeit mit Schriftarten haben.
Wenn Sie feststellen, dass die Schriftart auf bestimmten Browsern oder Betriebssystemen nicht korrekt angezeigt wird, können Sie versuchen, alternative Schriftformate wie WOFF2, TTF oder SVG zu verwenden, um die Kompatibilität zu verbessern.
Optimieren der Schriftverbindung
Das Verbinden von Schriftarten kann ein wichtiges Element im Webdesign sein, aber es kann auch das Laden einer Seite verlangsamen, wenn es nicht richtig optimiert wird. Hier sind einige Tipps, um Schriftarten effektiv zu verbinden:
- Wählen Sie die richtigen Schriftformate aus: um Ladezeit zu sparen, verwenden Sie die Schriftformate, die von den meisten Browsern unterstützt werden. Es wird empfohlen, die Formate TrueType (TTF) und Web Open Font Format (WOFF) zu verwenden.
- Schriften komprimieren: Die Schriftkomprimierung hilft, die Dateigröße zu reduzieren und das Laden der Seite zu beschleunigen. Sie können verschiedene Werkzeuge zum Komprimieren von Schriftarten verwenden, z. B. Font Squirrel oder Transfonter.
- Schriftarten asynchron laden: Es wird empfohlen, Schriftarten asynchron mit JavaScript- oder CSS-Funktionen zu laden, um zu verhindern, dass die Seite nicht geladen wird. Dadurch kann der Browser weiterhin andere Seitenelemente laden und die Benutzererfahrung verbessern.
- Caching optimieren: Legen Sie die richtigen Caching-Header für Schriftarten fest, damit der Browser sie speichern und bei nachfolgenden Besuchen auf der Seite wiederverwenden kann. Dies wird auch dazu beitragen, das Laden der Seite für Benutzer zu beschleunigen, die Ihre Website häufig besuchen.
- Verwenden Sie Systemschriftarten als Backup-Optionen: Um die Leistung zu verbessern und Schriftarten zu laden, können Sie dem Webbrowser auch Systemschriftarten als Backup-Optionen angeben. Auf diese Weise kann der Browser, wenn das Laden von Schriftarten langsam ist oder ein Fehler auftritt, Systemschriftarten als Alternative verwenden.
Wenn Sie diese einfachen Schritte befolgen, können Sie das Laden von Schriftarten auf Ihrer Website optimieren und die Leistung verbessern. Denken Sie daran, dass jede Website einzigartig ist, daher sind möglicherweise zusätzliche Optimierungen und Tests erforderlich, um die optimale Lösung für Ihr Projekt zu finden.
- arial