woff2base64 DOWNLOAD - woff2base64 Quellcode Download

woff2base64

Schriftarten herunterladen

1.0.0

Herunterladen

WOFF2BASE64

Erzeugt CSS-Schriftarten mit WOFF2- und WOFF-Schriftarten als Base64.

Installation

 npm install --save woff2base64

Verwendung

WOFF2BASE64 schaut automatisch den Schriftgewicht und den Schriftart im angegebenen Schriftfilenamen (Fall-unempfindlich) nach. Alle möglichen CSS -Werte werden unterstützt.

Wenn der Dateiname Ihrer Schriftart das Wort regelmäßig enthält, wird das Schriftgewicht auf normal gesetzt.

Wenn Sie jedoch den Dateinamen der Schriftart nicht ändern können, können Sie das Gewicht und den Stil für jede Schriftart über den font (siehe unten) übergeben.

 import fs from 'fs' ;
import woff2base64 from 'woff2base64' ;
const fonts = {
    'Roboto-Bold.woff2' : fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff2' ) ,
    'Roboto-Bold.woff' :  fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff' ) ,
	// ...
} ;
const options = {
    fontFamily : 'Roboto'
} ;
const css = woff2base64 ( fonts , options ) ;
// css.woff2 = '@font-face{font-family:"Roboto";src:url(data:application/font-woff2;charset=utf-8;base64,...'
// css.woff  = '@font-face{font-family:"Roboto";src:url(data:application/font-woff;charset=utf-8;base64,...'

fs . writeFileSync ( 'build/roboto.woff2.css' , css . woff2 ) ;
fs . writeFileSync ( 'build/roboto.woff.css' , css . woff ) ;

Parameter

Woff2Base64 akzeptiert zwei Objekte: fonts und options .

Schriftarten (erforderlich)

Verwenden Sie WOFF2- und WOFF -Dateinamen als Schlüssel.

Der Wert kann entweder eine String sein, die den Dateiinhalt enthält, ein Buffer der den Dateiinhalt oder ein Object enthält, sodass Sie Schriftoptionen über Schriftarten übergeben können:

 const fonts = {
    'Roboto-BoldItalic.woff2' : {
        content : fs . readFileSync ( 'fonts/Roboto/Roboto-BoldItalic.woff2' ) ,
        weight : 'bold' ,
        style : 'italic'
    } ,
    'Roboto-Bold.woff2' : {
        content : fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff2' ) ,
        weight : 'bold' ,
        style : 'normal'
    } ,
    'Roboto-Regular.woff2' : fs . readFileSync ( 'fonts/Roboto/Roboto-Bold.woff2' ) ,
} ;

Optionen

Fontfamilie (erforderlich)

Der Name der in CSS verwendeten Schriftfamilie.

Typ: String

fontfacetemplate

Die zum Erzeugen der CSS verwendete Vorlage. Verwendet mit Lodashs _.Template.

Typ: String

Standard:

 @font-face{ font-family:"<%=family%>";src:url(<%=uri%>) format("<%=format%>");font-weight:<%=weight%>;font-style:<%=style%>;}

FonturItemplate

Die Vorlage zum Generieren des base64 codierten Daten URI. Verwendet mit Lodashs _.Template.

Typ: String

Standard:

 data:<%=mime%>;charset=utf-8;base64,<%=base64%>

Banner

Ein Banner, das auf generierte CSS -Dateien vorbereitet wird. Auf '' zu deaktivieren, um das Banner zu deaktivieren.

Typ: String

Ressourcen

Konvertieren Sie Ihre TTF -Schriftarten in WOFF2 und WOFF mit dem WebFont -Generator von Font Squirrel.
Sehen Sie sich die aktuelle Browser -Unterstützung für WOFF2 und WOFF -Schriftarten auf canisue.com an.
Warum brauchst du das? Lesen Sie besseres Webfont-Laden mit Lokalstorage und bieten WOFF2-Unterstützung von Adam Beres-Deak.
Dieses Paket basiert auf Fontoptim von Artem Sapegin mit Verbesserungen für die Erkennung von Schriftarten im Schriftarten und Gewicht.