woff2base64 Download - woff2base64 Download do código fonte

woff2base64

Baixar fonte

1.0.0

Baixar

woff2base64

Gera a font-face CSS com as fontes woff2 e woff incorporadas como base64.

Instalação

 npm install --save woff2base64

Uso

O Woff2Base64 procura automaticamente o peso-fonte e o estilo de fonte no nome do arquivo de fonte fornecido (insensível ao caso). Todos os valores possíveis de CSS são suportados.

Se o nome do arquivo da sua fonte contiver a palavra regular , o peso da fonte será definido como normal .

No entanto, se você não puder alterar o nome do arquivo da fonte, poderá passar o peso e o estilo de cada fonte através do parâmetro font (veja abaixo).

 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 ) ;

Parâmetros

woff2base64 aceita dois objetos: fonts e options .

Fontes (necessárias)

Use WOFF2 e WOFF FILENames como chaves.

O valor pode ser uma String que contém o conteúdo do arquivo, um Buffer que contém o conteúdo do arquivo ou um Object , permitindo que você passe opções específicas da fonte:

 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' ) ,
} ;

Opções

Fontfamily (necessário)

O nome da família de fontes usada no CSS.

Tipo: String

fontfacetemplate

O modelo usado para gerar o CSS. Usado com _.template de Lodash.

Tipo: String

Padrão:

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

Fonturitemplate

O modelo usado para gerar o URI de dados codificados BASE64. Usado com _.template de Lodash.

Tipo: String

Padrão:

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

bandeira

Um banner que é precendido para gerar arquivos CSS. Definido como '' para desativar o banner.

Tipo: String

Recursos

Converta suas fontes TTF em WOFF2 e WOFF com o gerador WebFont do Font Squirrel.
Consulte o suporte atual do navegador para fontes woff2 e woff no canisue.com.
Por que você precisaria disso? Leia melhor o carregamento do WebFont com o uso do LocalStorage e fornecendo suporte WOFF2 pelo Adam Beres-Deak.
Este pacote é baseado em FontOptim por Artem Sapegin, com melhorias para o reconhecimento de estilo de fonte e peso-fontes.