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。版權所有。