<amp-font> - フォントの読み込みを制御する
公開日:
AMPのamp-fontは、フォントの読み込みを制御するための要素です。フォントの読み込みに時間制限を設けて、その時間内で読み込めなかった場合に、html要素に任意のクラス名を付与することができます。
概要
- 名前
- amp-font
- 可用性
- Stable (安定)
- サポートするレイアウト
- nodisplay
- 必要なスクリプト
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
- 検証
- https://github.com/ampproject/amphtml/blob/master/extensions/amp-font/0.1/validator-amp-font.protoascii
- ドキュメント
- https://www.ampproject.org/docs/reference/extended/amp-font.html
属性
font-family
指定例: Roboto
対象のフォント名。
on-error-add-class
クラス名を指定する。フォントがロードできなかった時、ここで指定したクラスがhtml要素(document.documentElement
)に追加される。
on-error-remove-class
クラス名を指定する。フォントをロードできなかった時、ここで指定したクラスがhtml要素(document.documentElement
)とbody要素(document.body
)から削除される。
on-load-add-class
クラス名を指定する。フォントのロードが完了し、表示できる状態になった時、ここで指定したクラスがhtml要素(document.documentElement
)に追加される。
on-load-remove-class
クラス名を指定する。フォントのロードが完了し、表示できる状態になった時、ここで指定したクラスがhtml要素(document.documentElement
)とbody要素(document.body
)から削除される。
timeout
指定例: 3000
フォントをロードする許容時間をミリ秒単位で指定する。ロードにこの秒数以上かかる場合はエラー扱いになる。0
を指定した場合、キャッシュになければエラー扱いになる。デフォルトは3000
。
共通属性
AMPの全てのタグで利用できる共通属性を指定できます。
説明
ライブラリの読み込み
amp-fontを利用するには、専用のライブラリを読み込む必要があります。
HTML
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
仕組み
amp-fontは、フォントが読み込めたか、読み込めなかったかで、html要素とbody要素のclass属性を変更する要素です。この要素を利用して「読み込みが完了するまでは非表示にする」などといったことが手軽にできます。
フォントを読み込む
例えば、Robotoというフォントを読み込むのを例にします。
HTML
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
amp-font要素を作成
amp-font要素を作成します。この要素自体は、layout属性にnodisplay
を指定しているため表示されません。分かりやすく、on-
で始まる各属性にそれぞれ単純なクラス名を指定してあります。timeout属性は制限時間です。ここで指定した秒数を超えてもフォントのロードが完了しなかった時、エラー判定となります。この例では3000ミリ秒(3秒)を指定してあります。
<amp-font
layout="nodisplay"
font-family="Roboto"
timeout="3000"
on-load-add-class="aaa"
on-load-remove-class="bbb"
on-error-add-class="ccc"
on-error-remove-class="ddd">
</amp-font>
成功した場合
フォントを3秒以内に読み込めて表示できる状態になった時、次の変化が起こります。
- html要素に、
aaa
というclass属性が付く。 - html要素とbody要素から、
bbb
というclass属性がなくなる。
HTML
<!-- 前 -->
<html amp class="bbb ddd">
<body class="bbb ddd">
<!-- 後 -->
<html amp class="aaa ddd">
<body class="ddd">
失敗した場合
フォントを3秒以内に読み込めなかった時、次の変化が起こります。
- html要素に、
ccc
というclass属性が付く。 - html要素とbody要素から、
ddd
というclass属性がなくなる。
HTML
<!-- 前 -->
<html amp class="bbb ddd">
<body class="bbb ddd">
<!-- 後 -->
<html amp class="bbb ccc">
<body class="bbb">
サンプルコード
HTML
<!doctype html>
<html amp class="bbb ddd">
<head>
<meta charset="utf-8">
<title>【デモ】<amp-font> - フォントの読み込みを制御する</title>
<link rel="canonical" href="https://syncer.jp/Web/AMP/Component/amp-font/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
body {
padding: 12px ;
background-color: #fff ;
}
.aaa {
color: red ;
font-family: Roboto ;
}
.bbb {
color: blue ;
}
</style>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "記事のタイトル",
"image": [
"eyecatch.jpg"
],
"datePublished": "2017-08-23T00:00:00+0900"
}
</script>
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<amp-font
layout="nodisplay"
font-family="Roboto"
timeout="3000"
on-load-add-class="aaa"
on-load-remove-class="bbb"
on-error-add-class="ccc"
on-error-remove-class="ddd">
</amp-font>
<p>Robotoフォントを3秒以内に読み込めたら赤、読み込めなかったら青で表示します。</p>
<p>SYNCER is Website.</p>
</body>
</html>