woff2base64ダウンロードwoff2base64ソースコードダウンロード

woff2base64

フォントのダウンロード

1.0.0

ダウンロード

woff2base64

base64として埋め込まれたWOFF2およびWOFFフォントでCSSフォントフェースを生成します。

インストール

 npm install --save woff2base64

使用法

woff2base64は、指定されたフォントファイル名（case-inssensitive）でフォントウェイトとフォントスタイルを自動的に検索します。考えられるすべての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 2つのオブジェクトを受け入れます。

フォント（必須）

woff2およびwoffファイル名をキーとして使用します。

値は、ファイルコンテンツを含む文字String 、ファイルコンテンツまたはObjectを含むBufferであり、フォント固有のオプションを渡すことができます。

 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%>;}

フォンチュール標本

テンプレートは、base64エンコードされたデータURIを生成するために使用されます。 Lodashの_.templateで使用されます。

タイプ： String

デフォルト：

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

バナー

生成されたCSSファイルの準備を整えるバナー。バナーを''にするために設定。

タイプ： String

リソース

TTFフォントをWoff2に変換し、Font SirrelのWebFontジェネレーターでWOFFを使用します。
Canisue.comのWoff2およびWoffフォントの現在のブラウザサポートをご覧ください。
なぜこれが必要なのですか？ LocalStorageを使用し、Adam Beres-DeakによるWoff2サポートを提供することで、より良いWebFontの読み込みをお読みください。
このパッケージは、Fontoptimに基づいてArtem Sapeginに基づいており、Font-StyleとFont-Weightの認識を改善しています。