1

3つのgoogleフォントを読み込もうとしている他の誰かのコードを変更しました。

彼らは3つのcssファイルを持っています。すべてのcssファイルは、googlewebフォントから1つのcssフォントを使用しています。Chrome開発ツールでは、1つのフォントだけが機能し、他の2つのフォントは機能しないことを確認しました。

これは、1つしか適用できないため、Chromeが1つをダウンロードしようとしているために発生します。ドロップダウンの選択変更でフォントを変更した場合、フォントがChromeにロードされていないため、機能しません。

ドロップダウンが変更されたときにフォントをロードしたいので、次のコードを記述します。

<div id="hiddenFontLoader"></div>

CSS：

#hiddenFontLoader {
    font-family: 'Quicksand', 'Cantarell';
    display: none;
}

このコードは、どこにも使用されておらず、ドロップダウンが変更されたときに使用される他の2つのフォントをロードするのに役立ちます。

今、私はそれが機能していることを証明したいと思います。私の場合、フォントを400％に設定するだけで、それが機能しているかどうかを確認できます。

フォントがロードされているかどうかをテストする適切な方法は何ですか。つまり、フォールバックフォントを使用すると、すべてのフォントの違いが非常に小さく、フォールバックフォントがGoogleフォントからロードしたフォントと非常に似ているかどうかを確認できません。

body {}に適用し、それがchromedevツールまたはfirebugで機能することを確認する方法を考えてみましょう。

誰もがそれのためのトリックを持っています。

4

1 に答える 1

3

Google WebFont Loaderの使用を検討する必要があります。ドキュメントは非常に詳細です。具体的には、 をご覧くださいActing on Events。

https://developers.google.com/webfonts/docs/webfont_loader

active イベント を探していると思います(ここをクリック!)。

于 2013-01-02T17:33:49.680 に答える