font-face urlへのconcatクエリ文字列

Question

ブラウザのキャッシュを避けるために、バージョンクエリ文字列を@font-faceのURLに連結したいとします。多くのURLがあります。どのようにこれは正しい方法で？恐ろしいフォントの

@font-face { 
    font-family: 'fontawesome'; 
    src: url('/styles/fonts/fontawesome/fontawesome.eot?6840zz'); 
    src: url('/styles/fonts/fontawesome/fontawesome.eot?6840zz#iefix') format('embedded-opentype'), 
     url('/styles/fonts/fontawesome/fontawesome.ttf?6840zz') format('truetype'), 
     url('/styles/fonts/fontawesome/fontawesome.woff?6840zz') format('woff'), 
     url('/styles/fonts/fontawesome/fontawesome.svg?6840zz#icomoon') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 1

ほとんどの実装は@font-faceフォントパスにバージョン付きクエリ文字列を追加します。これらのバージョン管理されたクエリ文字列は、フォントが新しいバージョンに更新されたときにキャッシュを破棄します。つまり、フォントを更新すると、バージョン付きクエリ文字列は?v=4.7.0から?v=4.7.1に変わります。

ほとんどの場合、ほとんどの実装でこれを処理するため、何もする必要はありません。他の多くのジェネレータとパッケージにもバージョンパラメータが追加されることに注意してください。@font-faceここではいくつかの例があります：あなたが含まfont-awesome.cssファイルがパスに添付クエリ文字列をバージョン管理しているだろうhttp://fontawesome.io/からフォント恐ろしいキットをダウンロードした場合

1. はフォント恐ろしいキットに

   をダウンロードしてください。 Ex。

   @font-face { 
       font-family: 'FontAwesome'; 
       src: url('../fonts/fontawesome-webfont.eot?v=4.7.0'); 
       src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); 
       font-weight: normal; 
       font-style: normal; 
   } 
   

   ?v=4.7.0は、バージョン管理されたクエリ文字列です。新しいバージョンのFont Awesomeをダウンロードすると、このバージョン番号が変わります。

   @font-face { 
       font-family: 'FontAwesome'; 
       src: url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.eot'); 
       src: url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
       url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff2') format('woff2'), 
       url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.woff') format('woff'), 
       url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.ttf') format('truetype'), 
       url('//use.fontawesome.com/releases/v4.7.0/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg'); 
       font-weight: normal; 
       font-style: normal; 
   } 
   

   ：あなたがCDNの実装を使用する場合はCDN

   恐ろしい

2. フォントは、次のようなCSSをインポートします

   このように、<script>が含まれるように取得しますFont Awesome CDNのURLにはバージョン番号が含まれています。これは更新されると変更され、キャッシュを破棄して削除されますバージョン管理されたクエリパラメータを追加する必要はありません。

3. サスを使用してまたは少ない

   あなたは以下/サスを使用している場合は、バージョンクエリ文字列が追加されますファイル。 Ex。

   @font-face { 
       font-family: 'FontAwesome'; 
       src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}'); 
       src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'), 
       url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'), 
       url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'), 
       url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'), 
       url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg'); 
       // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts 
       font-weight: normal; 
       font-style: normal; 
   } 
   

   @{fa-version}は、現在のバージョンのフォントが更新されたとき（現在4.7.0フォントパスへ。このバージョン番号が更新されますを追加します。その意味では、クエリは、fa-versionを変更することにより、一度にparamsは、すべてのバージョンを更新することができます変数。

#iefix

#iefixハッシュに関しては、これは問題を修正する方法でありますIE8以下では、単一のフォント内で複数のフォントフォーマットを定義するときに使用されますsrc。あなたのフォントがIE8以下で動作する必要がある場合は、#iefix（または任意のハッシュ `）を追加して、これらのブラウザでエラーが発生しないようにする必要があります。この詳細についてはSO questionをご覧ください。

その他する@ font-faceのフォントと実装

あなたは素晴らしいフォント以外のフォント、または他の実装を使用している場合は、独自のキャッシュ・バストを作成するために、フォントのパス上にハッシュを追加することができます。 01302017のように日付文字列が追加されているのはかなり一般的です。手動で、または必要に応じてビルドスクリプトで更新できます。