woff2base64

woff2base64

以Woff2和Woff字体嵌入为base64，生成CSS字体脸部。

安装

 npm install --save woff2base64

用法

Woff2Base64自动查找给定字体文件名（不敏感）中的字体重量和字体风格。支持所有可能的CSS值。

如果您的字体的文件名包含“常规”一词，则字体重量将设置为normal 。

但是，如果您无法更改字体的文件名，则可以通过font参数传递每种字体的重量和样式（请参见下文）。

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

参数

WOFF2BASE64接受两个对象： fonts和options 。

字体（必需）

将Woff2和Woff文件名用作密钥。

该值可以是包含文件内容的String ，包含文件内容的Buffer或Object ，从而使您可以传递特定于字体的选项：

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

选项

fontfamily（必需）

CSS中使用的字体系列的名称。

类型： String

fontfaceTemplate

用于生成CSS的模板。与lodash的_.template一起使用。

类型： String

默认：

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

Fonturitemplate

用于生成基本64编码数据URI的模板。与lodash的_.template一起使用。

类型： String

默认：

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

横幅

横幅会被预先添加到生成的CSS文件。设置为'' 。

类型： String

资源

• 使用Font Squirrel的WebFont Generator将TTF字体转换为WOFF2和WOFF。

• 请参阅Canisue.com上的Woff2和Woff字体的当前浏览器支持。

• 你为什么需要这个？通过使用LocalStorage并提供Adam Beres-deak的Woff2支持，请阅读更好的WebFont加载。

• 该软件包基于Artem Sapegin的Fontoptim，并改进了字体风格和字体重量识别。

执照

根据MIT许可发布。

版权（C）2017 Marcel Fetten。版权所有。