-

Webフォントがいつ読み込まれたかを判断したい場合は、WebFont Loaderを使おう

TypekitのようなWebフォントサービスでは... / Webフォントは読み込みが完了するまでテキストに... / 特にJavaScriptでUIを制御している場合...他...全11件

TypekitのようなWebフォントサービスではなく自前のWebフォントを使用する場合、フォントがいつ読み込まれたのかを判断することができません。

Webフォントは読み込みが完了するまでテキストに適用することができないため、一瞬違う書式のテキストが表示されたり、適用後にテキストの高さが変わってしまって、heightを指定している要素からはみ出すことがあります。

特にJavaScriptでUIを制御している場合は、Webフォントが読み込まれたかどうかをつかみたい場面に出くわします。その際に非常に便利なのが、GoogleとTypekitが共同で開発しているWebFont Loaderというライブラリです。

使い方は簡単で、ほんの数行コードを書き足すだけです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> 
<script type="text/javascript"> 
    WebFont.load({ 
        custom: {  
            families: [ 'QuicksandBook', 'QuicksandBold' ], 
            urls: [  
                'http://yetanotherwebfontprovider.com/Quicksand-fontfacekit/stylesheet.css' 
            ] 
        }, 
        loading: function() { 
            // ロードが開始されたとき 
        }, 
        active: function() { 
            // Web Fontが使用可能になったとき 
        }, 
        inactive: function() { 
            // ブラウザがサポートしていないとき 
        }, 
        fontloading: function(fontFamily, fontDescription) { 
            // fontFamilyのロードが開始されたとき 
        }, 
        fontactive: function(fontFamily, fontDescription) { 
            // fontFamilyが使用可能になったとき 
        }, 
        fontinactive: function(fontFamily, fontDescription) { 
            // fontFamilyをブラウザがサポートしていないとき 
        } 
    }); 
</script> 

WebFont Loaderを使用すると、Webフォントを適用している要素にその状態に合わせてwf-loading, wf-inactive, wf-activeというクラス名が付きます。

よくある要望で、「Webフォントが適用される前に一瞬表示される素のテキストを隠したい」ということがあります。これは、クラス名で判断してCSSで対応可能です。

日本語圏でWebフォントを使う機会はなかなか出くわしませんが、海外の仕事をしているとWebフォントは当たり前のように使用されているのが分かります。日本語のWebフォントサービスも続々リリースされていますので、これから徐々に目にすることになりそうですね。

最終更新日:2011-10-26 (20,155 views)

関連するトピックス

ページ上部に戻る