2

ページの読み込み時間を短縮する方法を検討していましたが、ページに読み込まれる CSS3 @font-face フォントをカスタマイズする必要があります。

私はいくつかの他のサイトのソースコードを見ていましたが、どういうわけかフォントが css ファイル内に埋め込まれていることに気付きました (私が知る限り)。

以下はbasecamp.comのサンプルです。cssファイルを見ると、css にフォントが埋め込まれています。

    @font-face {
  font-family: 'ProximaNova';
  src: url(data:font/opentype;charset=utf-8;base64,d09GRgABAAAAA0ABIAAA...[redacted]..xBeTUFYWAA==) format("woff"), url(data:font/truetype;charset=utf-8;base64,AAEAAAASAQAABAAgRkZUTWAFSKIAAAE...[redacted]...EsBYgRbIVHgIrsQNGditEWbAUKw==) format("truetype"), url("/assets/fonts/ProximaNova-Reg-webfont.svg#ProximaNovaRegular") format("svg");
  font-weight: normal;
  font-style: normal; }

フォントをこの形式に変換するにはどうすればよいですか? これはどのように作動しますか？

ロード時間を数百ミリ秒短縮し、サーバーへのリクエストを減らすことができたので、全体的には良い考えのようです.

ありがとう。

4

1 に答える 1

4

データ URLを使用すると、実際のリソース データを URL 自体に埋め込むことができます。小さなリソースには非常に便利ですが、大きなリソースにはあまり便利ではありません。これは、base64 としてエンコードされ、埋め込みテキスト リソースが肥大化するためです。

必要な作業は、base64エンコーディングを使用してそれぞれのフォント ファイルをエンコードし (このようなオンライン コンバーターが多数あります)、データ URL で正しいコンテンツ タイプを指定することです。

于 2012-04-10T10:20:33.937 に答える