amp-font
WEBフォントの読み込みのタイムアウト制御に使用します。
プラグインの読み込み
amp-fontを使用する場合は別途プラグインの読み込みが必要です。
amp.jsの後にでも読み込ませましょう。
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
基本構文と動作
どんな書き方でどんな動きすんのかを。まず簡単なものを。
<amp-font layout="nodisplay" font-family="My Font" timeout="3000" on-error-remove-class="my-font-loading" on-error-add-class="my-font-missing"> </amp-font> <amp-font layout="nodisplay" font-family="My Other Font" timeout="1000" on-load-add-class="my-other-font-loaded" on-load-remove-class="my-other-font-loading"> </amp-font>
各種プロパティについて
font-family | 対象となるWebフォントのfont-familyを指定します。 |
---|---|
timeout |
Webフォントロードのタイムアウトを指定します。(ミリ秒) デフォルトは3000(3秒)となります。 0が指定されている場合は、フォントがキャッシュに入っている場合のみロードします。 |
on-load-add-class | フォントのロードが完了し、表示できる状態になればここで指定したクラスが付与されます。 |
on-load-remove-class | フォントのロードが完了し、表示できる状態になればここで指定したクラスを削除します。 |
on-error-add-class | フォントロードが完了せず、タイムアウトを過ぎた場合、ここに追加されたクラスが付与されます。 |
on-error-remove-class | フォントロードが完了せず、タイムアウトを過ぎた場合、ここに追加されたクラスが削除されます。 |