WebフォントAPIを利用する

WebフォントAPIを利用する方法を例を交えて紹介します。

画面のちらつきを抑える方法(要jQuery)

1. style="visibility:hidden;"をbody要素に適用する
2. 下記JavaScriptを用意する

<script
     src                   = "//font.realtype.jp/api/script/v3"
     data-rt-user          = "34d81567c61c5d87d17e9cfa7900dcc2"
     data-rt-manual        = "true"
     data-rt-emulation     = "false"
     data-rt-layout        = "true"
     data-rt-input         = "false"
     data-rt-vertical      = "false"
     data-rt-callbackfnc   = "false"
     ></script>
 <script>
     RT.start(function(arg){
     },function(){
         $("body").css("visibility","visible");
     });
 </script>

以上で、画面のちらつきを抑えることができます。

仕組みの解説

まず、CSSでbody要素の表示を非表示にします。

次に、WebフォントJSの読み込みを行います。このとき、data-rt-manualをtrueにし、ユーザーのスクリプト上でフォント適用関数RT.start()を実行します。

RT.start()関数で呼び出されるコールバック関数でfunction(){$("body").css("visibility","visible");}を指定し、フォントの読み込み後にbody要素が表示されるようにします。