この Codelab では、Font Face を使用してテキストをすぐに表示する方法を説明します。 オブザーバー。
Font Face Observer を追加する
Font Face Observer: スクリプト
フォントの読み込みを検出します「
fontfaceobserver.js
ファイルはすでにプロジェクト ディレクトリに保存されているため、追加する必要はありません。
個別に選択できます。ただし、そのためのスクリプトタグを追加する必要があります。
- [Remix to Edit] をクリックして、プロジェクトを編集可能にします。
fontfaceobserver.js
のスクリプトタグをindex.html
に追加します。
<div class="text">Some text.</div>
<script src="fontfaceobserver.js" type="text/javascript"></script>
</body>
Font Face Observer を使用する
オブザーバーを作成
ページで使用するフォント ファミリーごとにオブザーバーを作成します。
fontfaceobserver.js
スクリプトの後に、次のスクリプトを追加します。これにより、 「パシフィコ」の監視員が「Roboto」:
<script src="fontfaceobserver.js" type="text/javascript"></script>
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
</script>
<body>
どのようなフォント フェース オブザーバーを作成すべきかわからない場合は、
CSS の font-family
宣言で確認できます。これらの宣言の font-family
名を渡します。
FontFaceObserver()
。フォント オブザーバーを作成する必要はありません。
フォールバック フォントを利用できます。
たとえば、CSS が次のようになったとします。
font-family: "Times New Roman", Times, serif;
FontFaceObserver('Times New Roman')
を追加します。Times と Serif
代替フォントであるため、FontFaceObservers を宣言する必要はありません。
フォントの読み込みを検出する
フォントの読み込みを検出するためのコードは次のようになります。
robotoObserver.load().then(function(){
console.log("Hooray! Font loaded.");
});
robotoObserver.load()
は、フォントの読み込み時に解決される Promise です。
デモサイトでは 2 つの異なるフォントを使用しているため、Promise.all()
を使用する必要があります。
両方のフォントが読み込まれるまで待機します。
- スクリプトの FontFaceObservers のすぐ下に、この Promise を追加します。 宣言します。
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
✔️チェックイン
スクリプトは次のようになります。
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
/* Do things */
});
</script>
fonts-loaded
クラスを適用
- スクリプトの
/* Do things */
コメントを次の行に置き換えます。
document.documentElement.classList.add("fonts-loaded");
これにより、fonts-loaded
クラスがドキュメントのルート要素(
両方のフォントが読み込まれたら、<html>
タグ)と一緒に追加します。
✔️チェックイン
完成したスクリプトは次のようになります。
<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');
Promise.all([
pacificoObserver.load(),
robotoObserver.load()
]).then(function(){
document.documentElement.className += " fonts-loaded";
});
</script>
CSS の更新
最初はシステム フォントを使用し、カスタム フォントを 1 回使用するようにページのスタイルを設定する必要があります
fonts-loaded
クラスが適用されています。
- CSS を更新します。
.header {
html.fonts-loaded .header {
font-family: 'Pacifico', cursive;
}
.text
html.fonts-loaded .text {
font-family: 'Roboto', sans-serif;
}
確認
- サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 。
次のようなページの場合、フォント フェースは正常に実装されています。 オブザーバー役は「見えないテキストのフラッシュ」を取り除きました。