Concat Query String zu font-face url

Question

Um den Cache des Browsers zu vermeiden, möchte ich die Version Querystring auf meine @font-face URL eingeben. Es gibt viele URLs. Wie geht das richtig?

@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

Die meisten Implementierungen von Font Ehrfürchtig wird Abfrage-Strings zu den @font-face Fontpfade versioniert anhängen. Diese versionierten Abfragezeichenfolgen werden den Cache überlasten, wenn die Schriftart auf eine neue Version aktualisiert wird. Das heißt, wenn Sie die Schriftart aktualisieren, ändert sich die versionierte Abfragezeichenfolge von etwa ?v=4.7.0 zu ?v=4.7.1.

In den meisten Fällen müssen Sie nichts extra tun, da die meisten Implementierungen dies für Sie erledigen. Denken Sie daran, viele andere @font-face Generatoren und Pakete werden auch einen Versions-Parameter anhängen. Hier sind ein paar Beispiele:

1. The Awesome Kit Schriftart Herunterladen

   Wenn Sie den Font Super-Kit von http://fontawesome.io/ die mitgelieferte font-awesome.css Datei auf den Pfaden angebracht haben wird versioniert Query-Strings herunterladen. 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; 
   } 
   

   die ?v=4.7.0 ist die versioniert Abfrage-String. Diese Versionsnummer ändert sich, wenn Sie eine neue Version von Font Awesome herunterladen.

2. Font Ehrfürchtig CDN

   Wenn Sie die CDN-Implementierung verwenden werden Sie erhalten eine <script> enthalten, wie

   Dies wird das folgende CSS importieren:

   @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; 
   } 
   

   In den URLs zum Font Awesome CDN ist die Versionsnummer enthalten, die sich bei der Aktualisierung ändert, wodurch der Cache durchbrochen und eliminiert wird ng der Notwendigkeit, einen versionierten Abfrageparameter anzuhängen.

3. Mit Sass oder weniger

   Wenn Sie die Less/Sass verwenden Dateien, die die versioniert Query-String hinzugefügt werden. 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; 
   } 
   

   Die @{fa-version} wird die aktuelle Version anhängen (derzeit 4.7.0 an den Font-Pfad. Diese Versionsnummer wird aktualisiert, wenn die Schriftart aktualisiert wird. In diesem Sinne können Sie alle Versionsabfrage aktualisieren sofort params durch die fa-version Wechsel Variable.

#iefix

Bezüglich des #iefix Hash, ist dies ein Verfahren zur Herstellung eines Ausgabebefestigungs in IE8 und darunter bei der Definition mehrerer Schriftformate innerhalb einer einzigen src. Wenn Sie Ihre Schriftart in IE8 und darunter arbeiten müssen, müssen Sie die #iefix (oder einen Hash-Wert) hinzufügen, damit diese Browser keine Fehler werfen. Mehr dazu in dieser SO question.

Andere @ font-face Schriftarten und Implementations

Wenn Sie eine andere Schrift als Font Ehrfürchtig verwenden, oder eine andere Implementierung können Sie einen Hash auf die Fontpfade anhängen Ihre eigenen Cache-Büste zu schaffen . Es ist ziemlich üblich, eine angehängte Datumszeichenkette wie 01302017 zu sehen, die bei Bedarf manuell oder über ein Build-Skript aktualisiert werden kann.