fontface styled components
1.0.0
Eine Bibliothek zum Generieren von Schriftarten in TTF-, EOT-, WOFF- und WOFF2-Formaten sowie @font-face -Anweisungen im Format der Stilkomponenten. Inspiriert von Fontface-Loader.
Diese Bibliothek zielt darauf ab, die Verwendung von Fontface-Automatisierung für Projekte styled-components zu vereinfachen, da die meisten Tools dort SCSS- oder CSS-Ausgabe erzeugen. Es bietet auch grundlegende Konfigurationsoptionen für Eingabe- und Ausgabeverzeichnisse, die einige andere Skripte vergessen haben.
Mit der Helferfunktion styled-components Helfer können Sie Schriftarten in Ihrem DOM importieren, wo Sie sie benötigen. Eine Requisite wird hinzugefügt, damit Sie die CSS-Eigenschaft von Schriftarten des @font-face steuern können, sodass Sie die Ladereihenfolge Ihrer Schriftarten programmgesteuert (zumindest in SSR-Kontexten) optimieren können.
Für zusätzliche Komfort kann diese Bibliothek auch einzelne CSS-Dateien generieren, die ein einzelnes @font-face laden, sowie SCSS-Dateien, die ein einzelnes @font-face laden und für die die CSS-Eigenschaft für Schriftarten über eine @use with AT-RULE gesteuert werden kann.
NPM
npm install --save-dev fontface-styled-components
Garn
yarn add -D fontface-styled-components
Standardmäßig unterstützt.
Sie müssen Fontforge installieren und die fontforge -Binärdatei in Ihrem $PATH haben. Wenn es installiert ist, wandelt ein Konvertierungsskript OpenType -Schriftarten als Teil des Build -Prozesses in TrueType um.
Verwenden Sie den folgenden Code, um Ihre Schriftarten und CSS-in-JS-Dateien zu generieren und anzupassen:
import fontface from 'fontface-styled-components' ;
fontface . run ( {
sourceDir : 'assets/fonts' ,
fontOutputDir : 'dist/fonts' ,
fontsPublicDir : 'https://my.cdn.com/my-project/public/fonts' ,
styledOutputDir : 'dist/src/assets/fontfaces/' ,
forceRefresh : process . env . NODE_ENV === 'production' ,
} )Um eine Schriftart im DOM einer Ihrer Seiten zu laden, verwenden Sie den folgenden Code:
import CatamaranBoldFontFace from 'src/assets/fontfaces/CatamaranBoldFontFace.style'
import CatamaranRegularFontFace from 'src/assets/fontfaces/CatamaranBoldFontFace.style'
< MyPageRoot >
< CatamaranBoldFontFace />
< CatamaranFontFace fontDisplay = "fallback" />
< MyContent />
</ MyPageRoot > Das Importieren der Datei Catamaran-bold.ttf würde normalerweise dazu führen, dass die folgende CSS-in-JS-Datei generiert wird:
import { createGlobalStyle } from 'styled-components'
export const CatamaranBoldFontFace = createGlobalStyle `
@font-face {
font-display: ${ props => props . fontDisplay || 'auto' } ;
font-family: 'Catamaran';
font-weight: 700;
font-style: normal;
src: local('Catamaran'),
url('/public/fonts/Catamaran-Bold.eot?#iefix') format('embedded-opentype'),
url('/public/fonts/Catamaran-Bold.woff2') format('woff2'),
url('/public/fonts/Catamaran-Bold.ttf') format('truetype'),
url('/public/fonts/Catamaran-Bold.woff') format('woff');
}
`
export default { CatamaranBoldFontFace } Pfad zum Ordner mit Quell -TTF -Schriftarten.
Standard : 'assets/fonts/'
Pfad zum Zielordner, damit die konvertierten Schriftarten platziert werden sollen. Die ursprüngliche TTF -Schrift wird ebenfalls in diesem Ordner kopiert.
Standard : 'dist/fonts/'
Pfad der Schriftarten in Ihrem Produktionsserver, der in Ihren URLs @font-face verwendet wird.
Standard : '/public/fonts/'
Ob @Fontface-Dateien für gestydierte Komponenten generieren soll.
Standard : true
Pfad zum Zielordner, in dem CSS-in-JS-Dateien geschrieben werden soll. Jede Quell-Schriftart hat eine eigene CSS-in-JS-Datei.
Standard : 'dist/src/fontfaces/'
Unabhängig davon, ob Vanilla CSS @Fontface -Dateien generiert werden soll.
Standard : false
Pfad zum Zielordner, in dem CSS @Fontface Deklaration -Dateien geschrieben werden soll. Jede Quell -Schriftart hat eine eigene CSS -Datei.
Standard : 'dist/src/fontfaces/'
Ob für jede Schriftart SCSS -Mixin -Dateien generiert werden soll.
Standard : false
Pfad zum Zielordner, in dem SCSS -Mixins geschrieben werden sollen. Jede Quell -Schriftart hat eine eigene SCSS -Datei.
Standard : 'dist/src/fontfaces/'
Ein Flag, um @Fontface Deklarationen eine lokale Quelle hinzuzufügen. Nur empfohlen, wenn Ihr Projekt in B2B -Umgebungen oder Verkaufsunternehmen eingesetzt werden soll, in denen Sie sicherstellen können, dass die lokale Schriftart identisch mit derjenigen ist, die Sie bedienen möchten, da sie häufig von Verbrauchergeräten unterschiedlich sind.
Standard : true für die Rückwärtskompatibilität, aber wir empfehlen, dass Sie es auf false setzen
Wenn festgelegt, wendet eine Schriftart-Display-Eigenschaft wahllos auf alle @Fontface-Dateien an. Dies ist in erster Linie beabsichtigt, wenn Sie ein Muster festlegen möchten, das Sie durch Ihr eigenes logisches Post-Build ersetzen möchten, oder wenn Sie eine Standardeinstellung festlegen und bestimmte @Fontface-Dateien manuell bearbeiten möchten.
Wenn nicht festgelegt, wird 'auto' standardmäßig für CSS -Dateien verwendet. Für CSS-in-JS-Dateien wird ein Vorlage-Literalparameter injiziert, das zuerst props.fontDisplay liest und das 'auto' zurückgibt, wenn diese Requisite nicht festgelegt ist.
Standard : null
Eine Flagge, um ein leeres Eingangsverzeichnis zu ermöglichen. Nützlich, wenn Sie in einer programmatischen Umgebung fontface-styled-components verwenden. Wenn false , wird ein Fehler geworfen, wenn im Eingabeverzeichnis keine Schriftarten gefunden werden.
Standard : false
Eine Flagge, um die Regeneration aller Eingangsschriften zu erzwingen, auch wenn sie bereits im Ausgabeverzeichnis vorhanden sind. Dies ist standardmäßig deaktiviert, da das Generieren von Schriftarten für große Webprojekte die Aufbauzeiten erheblich beeinflussen kann. Wir empfehlen Ihnen, diese Flagge immer für Produktionsergebnisse zu aktivieren.
Standard : false
Eine Flagge, um die Ausgabe von Informationen und Warnungen zu verhindern.
Standard : false
