fylgja fontface - fylgja fontface

fylgja fontface

Descarga de fuentes

v2.1

Descargar

Fylgja - Fontface

La mezcla Fylgja Font-Face hace que sea muy fácil cargar fuentes.

Establecerá todas las configuraciones requeridas para una buena fuente de fuente automáticamente. Que todavía son configurables si es necesario.

Tabla de contenido

Instalación
Cómo usar
Configuración
Consejos
- Bucle
- Íconos
Preguntas frecuentes

Instalación

npm i -D @fylgja/fontface

Cómo usar

Incluya el paquete de fuente en su código a través de;

Incluya el paquete Utilkit en su código a través de;

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

Para cargar una fuente. Llame a la mezcla de fuentes de fuentes. Agregue su nombre de fuente + sufijo de la fuente.

Mixin creará todos los otros pasos automáticamente (ver config).

Aporte:

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

Producción:

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

Configuración

No hay una configuración real, excepto las opciones de mezcla que puede pasar por fuente.

La mayoría de las opciones se completan. Si se deja a su valor predeterminado.

Por esta razón, es mejor llamar a una opción específica. En su lugar, cambia las opciones completas de mezcla. Hasta que haya alcanzado la opción que necesita cambiar.

Ejemplos;

Mal camino:

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

Bien:

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

Opción	Valor predeterminado	Descripción
`$name`		Nombre de la familia de fuentes
`$suffix`	nulo	Sufijo (por ejemplo, regular o audaz)
`$styles`	$ sufijo	Estilos (por ejemplo, 700i o 700 cursivas)
`$unicode`	$ U-Latin	Rango unicode de la cara de la fuente.
`$path`	'../fonts'	Ruta al archivo de fuentes
`$file-name`	nulo	Nombre del archivo de la fuente
`$formats`	Local, Woff2, Woff	Los formatos de archivo de la fuente de fuente.
`$load`	intercambio	Opción de carga de la fuente

Si una opción es nula, será completado por los valores predeterminados de la cara de fuente

Si falta una opción. Por favor, deje una solicitud de función.

Consejos

Bucle

Puede cargar toda la pila de fuentes Roboto a través de un bucle foreach.

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

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

Íconos

Puede usar esta mezcla para cargar también bibliotecas de iconos de fuentes. Simplemente llame a la mezcla como se describe anteriormente. Pero deje el campo sufijo a su valor predeterminado de NULL .

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

O use el valor de sufijo de 'Regular'

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

Esto se establecerá de forma predeterminada:

Font-peso a 400
estilo de fuente a la normalidad

Aún debe establecer el $unicode , ya que las bibliotecas de iconos tienen una dial que solo latín. El valor predeterminado para unicode es U+0-10FFFF que es todos unicodios.