5

私はRailsプロジェクトに参加しており、/assets/fontsフォルダー内にある2つのフォントを使用しています。

@font-face {
  font-family: FuturaStd-Light;
  src: url("/assets/fonts/FuturaStd-Light.otf");
}

@font-face {
  font-family: HelveticaNeue;
  src: url("/assets/fonts//HelveticaNeue.dfont");
}

フォントは非常に大きなファイル（特に2番目のファイル）であり、それらをロードするのに永遠に時間がかかります。そして、すべてのページで、テキストは他のすべての後に表示されます。

フォントをロードするためのより良い方法はありますか？それらをキャッシュする方法はありますか？何か案は？

4

2 に答える 2

3

@font-face は素晴らしいテクニックですが、フォント ファイルが大きいと、サイトの速度が確実に低下します。これに対抗するために使用できる多くのテクニックがあります。

  • Google フォントやTypekitなどのフォント ホスティング サービスを使用する
  • CDN でフォント ファイルをホストする
  • fontsquirrelなどのサービスを使用してフォント ファイルを最適化する

SCRIPT特に注意すべきことの 1 つは、スタイルシートの前に要素がある場合、IE がページ全体のレンダリングをブロックすることです。そのため、すべてのスタイルシート リンクが、読み込んでいるすべての JavaScript ファイルの上にあることを確認してください。

参考文献：

于 2012-07-05T22:14:31.550 に答える
1

@font-face はサイトの速度を低下させる可能性があるため、目的によっては、Google フォント、Typekit、または別のオンライン フォント プロバイダーを使用することをお勧めします。現在取り組んでいるプロジェクトでは、Google フォントを選択しました。あなたがしなければならないのは、あなたのapplications.html.erbにスニペットGoogle Webフォントを追加することだけです:

<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic' rel='stylesheet' type='text/css'>

そして、それを css ファイルに追加します。

h1 {
  font-family: "PT Sans", Arial, Helvetica, sans-serif;
}
于 2013-01-05T21:58:56.430 に答える