woff2base64

woff2base64

Génére la police CSS avec des polices WOFF2 et WOFF intégrées sous forme de base64.

Installation

 npm install --save woff2base64

Usage

Woff2Base64 recherche automatiquement le poids de la police et le style de police dans le nom de fichier de police donné (insensible à la cas). Toutes les valeurs CSS possibles sont prises en charge.

Si le nom de fichier de votre police contient le mot régulier , le poids de police sera défini à la normal .

Cependant, si vous ne pouvez pas modifier le nom de fichier de la police, vous pouvez passer le poids et le style pour chaque police via le paramètre font (voir ci-dessous).

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

Paramètres

Woff2Base64 accepte deux objets: fonts et options .

Polices (requises)

Utilisez des noms de fichiers WOFF2 et WOFF comme clés.

La valeur peut être une String contenant le contenu de fichier, un Buffer contenant le contenu de fichier ou un Object , vous permettant de transmettre des options spécifiques à la police:

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

Options

Fontfamily (requise)

Le nom de la famille des polices utilisés dans CSS.

Type: String

fontfacetemplate

Le modèle utilisé pour générer le CSS. Utilisé avec Lodash's _.Template.

Type: String

Défaut:

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

FonturiTemplate

Le modèle utilisé pour générer l'URI de données codées Base64. Utilisé avec Lodash's _.Template.

Type: String

Défaut:

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

bannière

Une bannière qui est apparentée pour générer des fichiers CSS. Réglé sur '' pour désactiver la bannière.

Type: String

Ressources

• Convertissez vos polices TTF en WOFF2 et WOFF avec le générateur Webfont de Font Squirrel.

• Voir la prise en charge actuelle du navigateur pour les polices Woff2 et Woff sur canisue.com.

• Pourquoi auriez-vous besoin de cela? Lisez un meilleur chargement Webfont avec l'utilisation de LocalStorage et la fourniture du support WOFF2 par Adam Beres-Deak.

• Ce package est basé sur Fontoptim d'Artem Sapegin avec des améliorations pour la reconnaissance de style police et de poids.

Licence

Libéré sous la licence du MIT.

Copyright (C) 2017 Marcel Fetten. Tous droits réservés.