目に見えないテキストの点滅を避ける

Katie Hempenius
Katie Hempenius

この 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;
}

確認

  • サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 全画面表示

次のようなページの場合、フォント フェースは正常に実装されています。 オブザーバー役は「見えないテキストのフラッシュ」を取り除きました。

手書きメモフォントの見出し。