Beim Erstellen einer Webanwendung ist die Einbeziehung Ihrer bevorzugten Schriftart wie das Tüpfelchen auf dem i. Schriftarten verbessern den Text, machen die Website ansprechender und sorgen für ein besseres Benutzererlebnis. Designer und Entwickler lieben und hassen manche Schriftarten, und die Verwendung der Standardschriftart könnte ihre Kreativität einschränken. Das Hinzufügen benutzerdefinierter Schriftarten gibt Entwicklern die Freiheit, ihrer Anwendung eine externe Schriftart hinzuzufügen.
Voraussetzungen
In diesem Tutorial empfehle ich dringend, dass Sie über Grundkenntnisse von Tailwind CSS verfügen.
Ich gehe davon aus, dass der Leser mit Tailwind CSS vertraut ist und weiß, wie man Tailwind in eine Anwendung integriert. Wenn Sie Tailwind noch nicht kennen, finden Sie in der offiziellen Dokumentation Anweisungen zur Installation.
Was ist eine benutzerdefinierte Schriftart?
Benutzerdefinierte Schriftarten sind Schriftarten, die standardmäßig nicht zur Verwendung verfügbar sind. Benutzerdefinierte Schriftarten sind in Ihrem System nicht vorhanden und stehen bei Bedarf nicht sofort zur Verfügung. Dazu gehören Schriftarten, die Sie kaufen, online beziehen, selbst erstellen oder speziell gebrandete Schriftarten, die Ihr Unternehmen verwendet. Ein beliebtes Beispiel für eine benutzerdefinierte Schriftart ist die Google-Schriftart.
Hinzufügen benutzerdefinierter Schriftarten zu Ihrem Projekt
Wenn Sie Tailwind in Ihrem Projekt installieren, wird eine Datei mit dem Namen tailwind.config hinzugefügt. In der Datei tailwind.config fügen wir benutzerdefinierte Schriftarten, Farben, Rasterlayoutvorlagen, Schriftgrößen usw. hinzu. Um benutzerdefinierte Schriftarten hinzuzufügen, platzieren Sie die benutzerdefinierten Eigenschaften zwischen dem Erweiterungsobjekt. Sehen Sie unten, wie die Datei tailwind.config aussieht:
/* tailwind.config file */
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: { },
},
},
plugins: [],
};
Nach dem Login kopieren
Um eine benutzerdefinierte Schriftart hinzuzufügen, verwende ich Google Fonts. Gehen Sie zur Google-Font-Website, klicken Sie auf „Stile auswählen“ und wählen Sie dann Ihre bevorzugte Schriftart aus. Für dieses Tutorial verwende ich diese Rubik's-Schriftart. Sehen Sie sich die bildliche Darstellung der Google-Font-Website unten an, mit eingekreisten Zahlen als Orientierung:
Um den Google-Link an Ihre HTML-Datei anzuhängen, führen Sie die folgenden Schritte aus:
Kopieren Sie den Link von Google.
Gehen Sie zur Datei index.html.
Suchen Sie das Head-Tag und fügen Sie den Link von Google Fonts ein.
<!-- index.html file -->
<!DOCTYPE html>
<html lang="en">
<!-- the heade tag -->
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-
react-app" />
<!-- google link -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2? family=Abril+Fatface&family=Mulish:wght@200;300;400;500;600;700;800;900;1 000&family=Rubik:wght@400;500&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Nach dem Login kopieren
Benutzerdefinierte Schriftarten verwenden
Nachdem Sie Rubik-Schriftarten in die Datei index.html eingefügt haben, sollte die Rubik-Schriftart in Ihrem Projekt verfügbar sein, aber Sie können sie noch nicht verwenden.
Um es zu verwenden:
Gehen Sie zur Datei tailwind.config.
Fügen Sie die Schriftartfamilie innerhalb des Erweiterungsobjekts hinzu.
Innerhalb der Schriftfamilie werde ich der Schriftart einen Namen geben, in diesem Fall lautet der Name rub. Es kann einen beliebigen Namen haben. Öffnen Sie eine Klammer, fügen Sie den Schriftartnamen („Rubik“) und eine Ersatzschriftart hinzu.
/* tailwind.config file */
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
fontFamily: {
'rub': ["Rubik", "sans-serif"],
},
},
},
plugins: [],
};
Nach dem Login kopieren
Tailwind erkennt Rubiks Schriftart, aber ich habe sie nicht verwendet. Gehen Sie zu der Datei oder Komponente, für die Sie die Schriftart verwenden möchten, und fügen Sie die Schriftart von Rubik zu ihren class=''/className=''-Attributen hinzu. Um die benutzerdefinierte Schriftart auf Ihr Projekt anzuwenden, verwenden Sie Rub und nicht Rubik. Siehe das Beispiel unten:
// the file/component
import React from 'react'
function CustomFonts() {
return (
<div className='flex justify-center'>
<div>
<!-- without custom font -->
<h1>Default Font</h1>
<p>Hello My name is Emeka and I enjoy creating things that
live on the internet. I also write technical articles.</p>
</div>
<div>
<!-- with custom font -->
<h1 className='font-rub'>Custom Font(Rubik Font)</h1>
<p className='font-rub'>Hello My name is Emeka and I enjoy
creating things that live on the internet. I also write
technical articles.</pv>
</div>
</div>
)
}
export default CustomFonts
Nach dem Login kopieren
Verwendung lokal heruntergeladener Schriftarten
Um lokal heruntergeladene Schriftarten zu verwenden, wähle ich eine zufällige Website aus. Sie können jede Website Ihrer Wahl ausprobieren. Gehen Sie zur Dafont-Website, suchen Sie in der Suchleiste nach einer Schriftart und laden Sie sie dann auf Ihren lokalen Computer herunter. Sehen Sie sich die bildliche Darstellung der Dafont-Website unten an, mit eingekreisten Zahlen als Orientierung:
Extrahieren Sie die ZIP-Datei (ich verwende WinRAR zum Extrahieren), kopieren Sie die extrahierte Datei und fügen Sie sie in einen Ordner in Ihrem Projekt ein. Siehe das Beispiel unten:
Der nächste Schritt besteht darin, zur Datei /index.css zu navigieren und @font-face einzufügen, um die benutzerdefinierte Schriftart in das Projekt zu integrieren. Ich werde ADELIA für die Schriftfamilie und src: verwenden, um anzugeben, wo die Schriftart verfügbar ist.
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: 'ADELIA';
src: url('./fonts/ADELIA.ttf');
}
Nach dem Login kopieren
Um die Rubik-Schriftart zu integrieren, navigieren Sie zur Datei tailwind.config und führen Sie die folgenden Schritte aus:
Hier ist ein Beispiel:
/* tailwind.config file */
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
fontFamily: {
'rub': ["Rubik", "sans-serif"],
'adelia': ['ADELIA', 'cursive']
},
},
},
plugins: [],
};
Nach dem Login kopieren
Wir können jetzt die Schriftart in unserem Projekt verwenden:
// the file/component
import React from 'react'
function CustomFonts() {
return (
<div className='flex justify-center'>
<div>
<!-- without custom font -->
<h1>Default font</h1>
<p>Hello My name is Emeka and I enjoy creating things that
live on the internet. I also write technical articles.</p>
</div>
<div>
<!-- with custom font -->
<h1 className='font-adelia'>Custom Font(Rubik Font)</h1>
<p className='font-adelia'>Hello My name is Emeka and I enjoy
creating things that live on the internet. I also write
technical articles.</pv>
</div>
</div>
)
}
export default CustomFonts
Nach dem Login kopieren
Abschluss
Sie können die benutzerdefinierte Schriftart in jeder Komponente oder Datei verwenden. Es gibt keine Beschränkungen auf eine bestimmte Datei oder Komponente; Sie können es in mehreren Komponenten oder Dateien im gesamten Projekt verwenden. Außerdem können Sie der Konfigurationsdatei mehr als eine benutzerdefinierte Schriftart hinzufügen. Ich hoffe, der Artikel war hilfreich. Liken, kommentieren und teilen Sie, damit andere etwas lernen können. Gracias.
Das obige ist der detaillierte Inhalt vonSo fügen Sie benutzerdefinierte Schriftarten zu Tailwind hinzu – für Web- und lokal heruntergeladene Schriftarten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
