9

プロジェクトで 3 つの Google フォントを使用しています。最初の 2 つは見出しと通常のテキスト用で、3 つ目はメニュー用です。そのため、メニューでは、すべて大文字の一連の文字のみを使用しています。Google フォント「css」をインポートすると、URL で「text」変数を使用して、必要な文字のみを呼び出すと、3 番目のフォントのサイズを 85% 縮小できます。

@import url(http://fonts.googleapis.com/css?family=Happy+Monkey&text=HOMECONTACT);

これは素晴らしいことですが、(呼び出しを節約するために) この URL に他のフォントを追加すると、"text" 変数が URL 内のすべてのフォントに影響します。したがって、解決策は、次のように、もう 1 つの呼び出しを使用して、フォントを個別に要求することです。

@import url(http://fonts.googleapis.com/css?family=Happy+Monkey&text=HOMECONTACT);
@import url(http://fonts.googleapis.com/css?Marcellus+SC|Open+Sans+Condensed:300);

今、私がやりたいことは、1 回の呼び出しですべてのフォントを取得することですが、特定の 1 つのフォントの文字セットのみを取得します。つまり、以前の呼び出しを 1 つに結合します。GoogleフォントAPIを読んで、それは不可能だと思いますが、それでも、誰かがこれに対する解決策を知っているかどうか尋ねています.

前もって感謝します！

4

3 に答える 3

2

それを行う方法はまだありません。おそらく、最適化されたフォント リクエストがまだベータ版であるためです。

私がお勧めするのは、<head>で CSS を使用する代わりに、 でリクエストを使用すること@importです。ページ速度の観点から、CSS ファイルからの @import は、スタイルシートが同時にダウンロードされるのを妨げる可能性があるため、ほとんど使用しないでください。メイン HTML ページの要素で両方のスタイルシートが参照されている場合<link>、両方を同時にダウンロードできます。

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Happy+Monkey&text=HOMECONTACT">
<link rel="stylesheet" href="//fonts.googleapis.com/css?Marcellus+SC|Open+Sans+Condensed:300">

リクエストが 1 つ増えても、ページの読み込みは より速くなります@import。

于 2014-04-23T13:39:28.143 に答える