fylgja fontface Download - fylgja fontface Source Code Download

fylgja fontface

Baixar fonte

v2.1

Baixar

Fylgja - Fontface

O mixin Fylgja Font-Face torna super fácil carregar fontes.

Ele definirá todas as configurações necessárias para uma boa face de fonte automaticamente. Que ainda são configuráveis, se necessário.

Índice

Instalação
Como usar
Config
Pontas
- Laço
- Ícones
Perguntas frequentes

Instalação

npm i -D @fylgja/fontface

Como usar

Inclua o pacote de fontes no seu código via;

Inclua o pacote Utilkit no seu código via;

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

Para carregar uma fonte. Ligue para o mixin da font-face. Adicione o nome da fonte + sufixo da fonte.

Todas as outras etapas serão criadas pelo Mixin automaticamente (consulte Config).

Entrada:

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

Saída:

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

Config

Não há configuração real, exceto as opções de mixin que você pode passar por fonte.

A maioria das opções é preenchida. Se deixado para o seu valor padrão.

Por esse motivo, é melhor chamar uma opção específica. Em vez disso, altere as opções completas de mixin. Até que você atinja a opção que precisa mudar.

Exemplos;

Mada ruim:

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

Bom caminho:

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

Opções	Valor padrão	Descrição
`$name`		Nome da família de fontes
`$suffix`	nulo	Sufixo (por exemplo, regular ou ousado)
`$styles`	$ sufixo	Estilos (por exemplo, 700i ou 700 itálico)
`$unicode`	$ u-latin	Alcance unicode da face da fonte.
`$path`	'../fonts'	Caminho para o arquivo de fontes
`$file-name`	nulo	Nome do arquivo da fonte
`$formats`	Local, Woff2, Woff	Os formatos de arquivo da font-face.
`$load`	trocar	Opção de carregamento da fonte

Se uma opção for nula, ela será preenchida pelos padrões da font-face

Se falta uma opção. Por favor, deixe uma solicitação de recurso.

Pontas

Laço

Você pode carregar toda a pilha de fontes Roboto por meio de um loop foreach.

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

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

Ícones

Você pode usar esse mixin para também carregar as bibliotecas de ícones da fonte. Basta chamar o mixin, conforme descrever acima. Mas deixe o campo de sufixo até o valor padrão do NULL .

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

Ou use o valor do sufixo de 'Regular'

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

Isso definirá por padrão o:

Fonte-peso a 400
estilo de fonte ao normal

Você ainda deve definir o $unicode , pois as bibliotecas de ícones têm uma diferença diferente do que apenas latim. O padrão para o Unicode é U+0-10FFFF que é todos Unicodes.