Webフォントフリッカーブロック(ちらつき防止)機能
Webフォントは画像と同様にインターネット上から配信されるため、ブラウザ上で下記のような表示になり、ユーザーにストレスを与えてしまう可能性があります(フリッカー現象と呼びます)。
- メイリオやＭＳ Ｐ ゴシック等のＯＳに標準で搭載されているフォントが一瞬表示される
- 直後に文字の表示が消える
- 最後にＷｅｂフォントが表示される
このフリッカー現象を防止するために、REALTYPEでは下記の方法を用意しておりますので、ぜひご活用くださいませ。
※IE11では本機能は有効化されません。
１．フリッカーブロックスクリプトを<head>〜</head>内に記述する
<script src="//font.realtype.jp/api/script/nochattering" id="RT_SCRIPT_NO_CHATTERING"></script>2. CSSでWebフォントを適用するfont-familyの値の次に’NoChattering’を追加する
CSS記述例：
.myfont{
font-family:'A+RT-xxx XXXXXXXXXXX','NoChattering';
}以上でフリッカー現象を無くす事が可能となります。
フリッカーブロックスクリプトの説明
タイムアウト秒数の変更
通信環境が著しく悪い場合、フリッカーブロックスクリプトのロードができてもWebフォントのロードができない場合があります。その場合、テキストが何も表示されない時間がデフォルトで10秒と設定されています。フリッカーブロックスクリプトでは、オプションで、Webフォントのロードが完了するまで待つ時間をミリ秒で指定する事ができます。
タイムアウト秒数を5秒間(5000ミリ秒)に設定する例
<script src="//font.realtype.jp/api/script/nochattering" id="RT_SCRIPT_NO_CHATTERING" data-rt-timeout="5000"></script>フリッカーブロックに使われるfont-family名の変更
フリッカー現象を防止したいCSSセレクタのfont-family値に指定する際の値(デフォルトでは’NoChattering’)を変更する事ができます。
font-family名に指定する値をflickerBlockFontに設定する例
<script src="//font.realtype.jp/api/script/nochattering" id="RT_SCRIPT_NO_CHATTERING" data-rt-fname="flickerBlockFont"></script>フリッカーブロックを快適なWebフォントの表示に役立ててください。
合せて使うと効果的な文字列動的追加時のフラッシュ低減機能「data-rt-nofliker」についてはスクリプトタグ解説をご覧ください。