1つのフォントが入り、すべてのWebフォントが出てきます。
このツールの目的は、Webサービスに依存したり、ネットワーク接続を必要としたりすることなく、任意のフォントファイルからWebフレンドリーなフォント形式の生成と@font-face CSSルールを自動化することです。このツールは、必要に応じてインラインデータURLを生成できます。
埋め込みフォントの互換性の最大化に関する詳細については、css-tricks.comの使用 @font-faceの記事を参照してください。
./setup # Fetch and build third-party libraries
./bin/generate-webfonts MyFont.ttf -o assets/ # Convert a font ドライバースクリプトはgenerate-webfontsです。最も基本的には、フォントファイルを引数として受け入れ、変換されたフォントをすべてディレクトリに吐き出します。また、適切な@font-faceルールのCSSを生成することもできます。
./bin/generate-webfonts -o assets MyFont.ttf --css MyFont.css
デフォルトの出力形式を使用する上記のコマンドは、次のファイルを生成します。
MyFont.cssassets/MyFont.woffassets/MyFont.woff2assets/MyFont.ttfassets/MyFont.eotassets/MyFont.svgファイルMyFont.cssには以下が含まれます。
@font-face {
font-family : 'MyFont' ;
src : url ( 'assets/MyFont.eot' );
src : url ( 'assets/MyFont.eot?#iefix' ) format ( 'embedded-opentype' ) ,
url ( 'assets/MyFont.woff2' ) format ( 'woff2' ) ,
url ( 'assets/MyFont.woff' ) format ( 'woff' ) ,
url ( 'assets/MyFont.ttf' ) format ( 'truetype' ) ,
url ( 'assets/MyFont.svg#MyFont' ) format ( 'svg' );
}概念的には、入力ファイルのリストと出力形式のリストが与えられたため、コンバーターは一致する入力ファイルをコピーしてファイルを変換してギャップを入力することにより、すべての出力形式の要件を満たそうとします。基礎となるフォントコンバーターの制限があるため、要求されていない中間形式が生成される場合があります。
コマンドは、その形式を一致させるファイルが既に入力の1つとしてリストされている場合、特定の出力形式でファイルを生成することを避けます。この場合、入力ファイルは単に宛先ディレクトリにコピーされます(または、既に出力ディレクトリに既にある場合は、単独で放置されます)。このようなファイルが引数にリストされていない場合、出力ディレクトリに既に存在していても、新しく変換されたファイルで上書きされます。
より高度な使用については、以下のオプションを参照してください。
スクリプトbin/generate-webfonts 、フォントファイルのリストを入力および多くのオプションとして受け入れます。
-o --output変換されたファイルの宛先ディレクトリ。インラインフォントのみが生成されている場合でも、中間ファイルを保持するために宛先ディレクトリが必要です。
-f --format出力形式のコンマ分離リスト。考えられる形式は次のとおりです。
任意のフォーマットに接尾辞:inlineファイルへのURLではなく、base64でエンコードされたデータURLとして、フォントがCSSファイルにインラリングされます。
デフォルトのフォーマットリストはeot,woff2,woff,ttf,svgです。
-c --css生成されたCSSファイルのパス。使用-用。省略した場合、CSSは生成されません。
-p --prefix生成されたCSSで使用されるフォントパスのプレフィックス。たとえば、スタイルシートがcss/から提供され、フォントがfonts/から提供されている場合、プレフィックスを../fonts/に設定する必要があります。デフォルトのプレフィックスは、出力ディレクトリの名前です。
--font-familyCSSファイルで使用されるフォントファミリの名前。デフォルトは、最初の入力ファイルのベース名です。
--verbose実行中に冗長出力を表示します。
-v --version表示バージョン。
generate-webfonts次のフォント形式をサポートしています。
1つの例外を除いて、上記の形式のいずれかとの間で変換できます。EOTを他の形式に変換することはできません。
ジェネレーターは、フォントを変換するための3つのサードパーティライブラリ/ツールを活用します。単一のツールがすべてのフォント形式をサポートしていないため、ジェネレーターのジョブは、2つのフォント形式間を変換するために使用するコンバーターの適切なチェーンを把握することです。ボンネットの下では、実際には依存関係グラフで最も短いパスの問題として実装されています。
使用されるサードパーティのツールは次のとおりです。
Fontforgeは、EOTまたはWOFF2形式をサポートしていませんが、かなりの数のフォント形式の読み取りと生成をサポートしています。ぼんやりと速いsfntlyライブラリは、これらのギャップの1つをカバーするために、TTFフォントをEOTまたはWOFFに変換できます。 GoogleからのWoff2コンバーターは、Woff2形式とTTF形式間を変換するためにも使用されます。
上記のように、run ./setup実行して、サードパーティライブラリをダウンロードして構築します。 Running ./setupは、 generate-webfontsそれらを見つけることができるSFNTLYおよびWOFF2コンバーターリポジトリをローカルにチェックアウトします。パッケージマネージャーを使用して、またはウェブサイトから直接Fontforgeをインストールします。
セットアッププロセスでは、 *nix環境を想定しています。現在、このツールをWindowsにセットアップするサポートはありません。
セットアップスクリプトを実行するには、次のコマンドが必要です。
gitjavaとjavacmvn (Maven) generate-webfontsスクリプト自体には、Python 3が必要です。
責任を持って変換してください!フォントクリエイターの著作権を尊重します。