fontfaceonloadダウンロードfontfaceonloadソースコードのダウンロード

fontfaceonload

フォントのダウンロード

Version 0.1.7

ダウンロード

fontfaceonload

ショ和ショ和ショ和このプロジェクトはアーカイブされています。代わりに、CSSフォントロードAPIを直接使用してください！例についてはweb-font-loading-recipesをご覧ください。

デモ

使用法

既存の@font-face宣言で使用します。

 @font-face {
    font-family : My Custom Font Family;
    /* src and other properties as normal */
}

ライブラリを含めます。 JavaScriptに電話してください。

 FontFaceOnload ( "My Custom Font Family" , {
    success : function ( ) { } ,
    error : function ( ) { } ,
    timeout : 5000 // in ms. Optional, default is 10 seconds
} ) ;

コンテンツフォントで使用します

@font-faceが読み込まれている間にフォールバックフォントを表示できるようにするには、次のようにFontFaceOnloadを使用します。

 FontFaceOnload ( "My Custom Font Family" , {
    success : function ( ) {
        document . documentElement . className += " my-custom-font-family" ;
    }
} ) ;

次に、クラスを使用して、カスタムフォントの使用法を範囲します。

 body {
    font-family : sans-serif;
}
. my-custom-font-family body {
    font-family : My Custom Font Family , sans-serif;
}

また、FOITを排除し、CSSを変更する必要はない別のアプローチは、 loadCSSライブラリを使用して@font-faceデータURIソースブロックで動的にロードすることです。 loadCSS fontfaceonloadよりも小さいです。このアプローチの制限には、ロードするフォーマット（Woff、Woff2、TTF）を管理する必要があり、アイコンフォントでも機能しません（記述テキストのように、他の兄弟要素をスタイリングするためにCSSクラスが必要なため）。

アイコンフォントで使用します

アイコンフォントがロードされている間に奇妙なフォールバック文字が表示されないようにフォールバックフォントを非表示にするには、次のようなglyphsオプションでfontfaceonloadを使用します。

 FontFaceOnload ( "My Custom Font Icon" , {
    success : function ( ) {
        document . documentElement . className += " my-custom-font-icon" ;
    } ,
    glyphs : "uE600uE601uE602uE605" // Optional, default is "". Useful for icon fonts: a few code points from your custom font icon.
} ) ;

次に、クラスを使用して、カスタムフォントの使用法を範囲します。

. icon {
    display : none;
}
. my-custom-font-family . icon {
    display : inline-block;
    font-family : My Custom Font Icon , sans-serif;
}

それがどのように機能するか

これにより、利用可能な場合はCSSフォントロードモジュールを使用します（現在Chrome 35+およびOpera 22+）。それが利用できない場合、TypeKit Webフォントローダー（現在7.1kb GZIP）で使用されているアプローチと非常によく似たアプローチを使用します。

基本的に、WebフォントとデフォルトのSerif/Sans-Serif書体を含むフォントスタックを備えた要素を作成します。次に、テスト文字列を使用し、特定の間隔で要素の寸法を測定します。寸法がデフォルトのフォールバックフォントとは異なる場合、フォントは正常にロードされたと見なされます。

CSSフォントロードモジュール用の完全なポリフィルが必要な場合は、BRAM Steinのフォントローダーに従ってください。彼がこのポリフィルを開始してから仕様は変わったと思いますが、彼は更新されたバージョンに取り組んでいます。

プロジェクトの構築

これらのコマンドを実行します：

npm install
bower install
grunt init
通常のようにgrunt 。

グラントの構成

1つの巨大なGruntfile.jsではなく、このプロジェクトはモジュラーグラントセットアップを使用しています。各個々のGrunt Configurationオプションキーにはgrunt/config-lib/ （読み取られて上流の構成を読み取り、これらを直接変更しない）またはgrunt/config/ （プロジェクト固有の構成）にある独自のファイルがあります。両方のディレクトリで同じキーを使用することができます。オブジェクトは、Lo-Dashマージを使用してスマートに結合されます。

前のgruntfileセットアップで連結するために、このようにgrunt.initConfigに渡された巨大なオブジェクトに別のキーを追加します： grunt.initConfig({ concat: { /* YOUR CONFIG */ } }); 。新しい構成では、 module.exports = { /* YOUR CONFIG */ };を使用してgrunt/config/concat.jsを作成します。。