woff2base64

woff2base64

Genera la fuente de fuente CSS con las fuentes Woff2 y Woff incrustadas como Base64.

Instalación

 npm install --save woff2base64

Uso

Woff2Base64 busca automáticamente el peso de fuente y el estilo de fuentes en el nombre de archivo de fuentes dado (insensible al caso). Se admiten todos los valores CSS posibles.

Si el nombre de archivo de su fuente contiene la palabra regular , el peso de la fuente se establecerá en la normal .

Sin embargo, si no puede cambiar el nombre de archivo de la fuente, puede pasar el peso y el estilo para cada fuente a través del parámetro font (ver más abajo).

 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 acepta dos objetos: fonts y options .

fuentes (requeridos)

Use los nombres de archivo Woff2 y Woff como claves.

El valor puede ser una String que contiene el contenido del archivo, un Buffer que contiene el contenido del archivo o un Object , lo que le permite pasar opciones específicas de fuente:

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

Opción

Fontfamily (requerido)

El nombre de la familia de fuentes utilizada en CSS.

Tipo: String

plantilla de fontfacet

La plantilla utilizada para generar el CSS. Utilizado con la plantilla de Lodash.

Tipo: String

Por defecto:

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

plantilla de fonturit

La plantilla utilizada para generar el URI de datos codificado Base64. Utilizado con la plantilla de Lodash.

Tipo: String

Por defecto:

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

bandera

Un banner que se prepara para los archivos CSS generados. Establecer en '' para deshabilitar el banner.

Tipo: String

Recursos

• Convierta sus fuentes TTF a Woff2 y Woff con el generador WebFont de Font Squirrel.

• Vea el soporte actual del navegador para Woff2 y Woff Fonts en Canisue.com.

• ¿Por qué necesitarías esto? Lea la mejor carga de la fuente web con el uso de LocalStorage y proporcione el soporte de Woff2 de Adam Beres-Deak.

• Este paquete se basa en Fontoptim por Artem Sapegin con mejoras para el reconocimiento de estilo y peso de fuente.

Licencia

Liberado bajo la licencia MIT.

Copyright (c) 2017 Marcel Fetten. Reservados todos los derechos.