fylgja fontface Download - fylgja fontface Download

fylgja fontface

Téléchargement de polices

v2.1

Télécharger

Fylgja - Fontface

Le mélange de polices Fylgja facilite le chargement des polices.

Il définira automatiquement tous les paramètres requis pour une bonne police. Qui sont toujours configurables si nécessaire.

Table des matières

Installation
Comment utiliser
Configurer
Conseils
- Boucle
- Icônes
FAQ

Installation

npm i -D @fylgja/fontface

Comment utiliser

Incluez le package Font-Face dans votre code via;

Incluez le package utilkit dans votre code via;

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

Pour charger une police. Appelez le mélange de polices. Ajoutez votre nom de police + suffixe de la police.

Toutes les autres étapes seront créées par le mixin automatiquement (voir config).

Saisir:

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

Sortir:

 @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;
}

Configurer

Il n'y a pas de configuration réelle sauf les options de mixin que vous pouvez passer par police.

La plupart des options sont remplies. Si elle est laissée à sa valeur par défaut.

Pour cette raison, il vaut mieux appeler une option spécifique. Au lieu de modifier les options de mixin complètes. Jusqu'à ce que vous ayez atteint l'option que vous devez modifier.

Exemples;

Mauvaise façon:

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

Bon moyen:

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

Options	Valeur par défaut	Description
`$name`		Nom de la famille des polices
`$suffix`	nul	Suffixe (par exemple, régulier ou audacieux)
`$styles`	$ suffixe	Styles (par exemple 700i ou 700 italique)
`$unicode`	$ u-latin	Unicode Range de la face de la police.
`$path`	'../fonts'	Chemin vers le fichier de police
`$file-name`	nul	Nom de fichier de la police
`$formats`	Local, Woff2, Woff	Les formats de fichiers de la police.
`$load`	échanger	Option de chargement de la police

Si une option est nulle, elle sera remplie par les défauts de la police

Si une option est manquante. PLZ laisse une demande de fonctionnalité.

Conseils

Boucle

Vous pouvez charger l'intégralité de la pile de polices Roboto via une boucle foreach.

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

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

Icônes

Vous pouvez utiliser ce mixin pour charger également les bibliothèques d'icônes de police. Appelez simplement le mixin comme décrit ci-dessus. Mais laissez le champ de suffixe à sa valeur par défaut de Null .

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

Ou utilisez la valeur du suffixe de 'Regular'

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

Cela définira par défaut le:

Police à 400
style de police à normal

Vous devez toujours définir le $unicode , car les bibliothèques d'icônes ont une différence que le latin. La valeur par défaut de l'Unicode est U+0-10FFFF qui est tout Unicodes.