SYNCER

SYNCER

<amp-font> - フォントの読み込みを制御する

1件

公開日:

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>

デモを開く

デモ

</head><body>までを含めて下さい。

</body> </html>

<style amp-custom>

</style>