fylgja fontface Download - fylgja fontface Source Code Download

fylgja fontface

Schriftarten herunterladen

v2.1

Herunterladen

Fylgja - Schriftface

Das Fylgja-Schriftart-Mixin macht es super einfach, Schriftarten zu laden.

Es wird alle erforderlichen Einstellungen für einen guten Schriftgesicht automatisch festgelegt. Die bei Bedarf noch konfigurierbar sind.

Inhaltsverzeichnis

Installation
Wie man benutzt
Konfiguration
Tipps
- Schleife
- Ikonen
FAQ

Installation

npm i -D @fylgja/fontface

Wie man benutzt

Fügen Sie das Schriftart-Paket in Ihren Code über ein.

Fügen Sie das Utilkit -Paket in Ihren Code über ein.

 @import " @fylgja/fontface " ; // (DartSass, LibSass 3.6)
@import " @fylgja/fontface/index " ; // old way

Eine Schriftart laden. Rufen Sie den Schriftart Mixin an. Fügen Sie Ihren Schriftartnamen + Suffix der Schrift hinzu.

Alle anderen Schritte werden vom Mixin automatisch erstellt (siehe Konfiguration).

Eingang:

 @include font-face ( " Roboto " , " Bold Italic " );

Ausgabe:

 @font-face {
  font-family : "Roboto" ;
  src :
    local ( "Roboto Bold Italic" ) ,
    local ( "Roboto-BoldItalic" ) ,
    url ( "../fonts/Roboto-BoldItalic.woff2" ) format ( "woff2" ) ,
    url ( "../fonts/Roboto-BoldItalic.woff" ) format ( "woff" );
  unicode-range : "U+0000—00FF" ;
  font-weight : 700 ;
  font-style : italic;
  font-display : swap;
}

Konfiguration

Es gibt keine echte Konfiguration außer den Mixin -Optionen, die Sie pro Schriftart übergeben können.

Die meisten Optionen werden ausgefüllt. Wenn sie dem Standardwert überlassen werden.

Aus diesem Grund ist es besser, eine bestimmte Option aufzurufen. Ändern Sie stattdessen die vollständigen Mixinoptionen. Bis Sie die Option erreicht haben, müssen Sie sich ändern.

Beispiele;

Schlechter Weg:

 @include font-face ( " Roboto " , " Regular " , 400 , " U+0-10FFFF " , " ../assets " );

Guter Weg:

 @include font-face ( " Roboto " , " Regular " , $path : " ../assets " );

Optionen	Standardwert	Beschreibung
`$name`		Name der Schriftfamilie
`$suffix`	NULL	Suffix (z. B. regulär oder mutig)
`$styles`	$ Suffix	Stile (zB 700i oder 700 kursiv)
`$unicode`	$ u-latin	Unicode -Bereich der Schriftart.
`$path`	'../fonts'	Pfad zur Schriftart Datei
`$file-name`	NULL	Dateiname der Schriftart
`$formats`	Lokal, Woff2, Woff	Die Dateiformate des Schriftarts.
`$load`	tauschen	Ladeoption der Schriftart

Wenn eine Option null ist, wird sie von den Schriftstellungen der Schriftart ausgefüllt

Wenn eine Option fehlt. Bitte hinterlassen Sie eine Feature -Anfrage.

Tipps

Schleife

Sie können den gesamten Roboto -Schriftstapel über eine Foreach -Schleife laden.

 $fonts-roboto : (
    " Light " ,
    " Light Italic " ,
    " Regular " ,
    " Italic " ,
    " Bold "
);

@each $styles in $fonts-roboto {
    @include font-face ( " Roboto " , $styles );
}

Ikonen

Mit diesem Mixin können Sie auch Bibliotheken für Schriftarten icon laden. Nennen Sie einfach den Mixin wie oben beschrieben. Lassen Sie das Suffixfeld jedoch seinen Standardwert von NULL .

 @include font-face ( " FontAwesome " , $unicode : " U+0-10FFFF " );

Oder verwenden Sie den Suffixwert von 'Regular'

 @include font-face ( " Material Icons " , " Regular " , $unicode : " U+0-10FFFF " );

Dies setzt standardmäßig die:

Schriftgewicht auf 400
Schriftstil bis normal

Sie müssen immer noch den $unicode festlegen, da Icon -Bibliotheken eine unterschiedliche als nur lateinisch haben. Die Standardeinstellung für den Unicode ist U+0-10FFFF was alle Unicodes sind.