Yazı tipi-yüz URL'si için Concat sorgu dizesi

Question

Tarayıcının önbelleğini engellemek için sürüm querystring'i @font-face 'lerin URL'ime uydurmak istiyorum. Çok fazla url var. Bu nasıl doğru bir şekilde? Müthiş Yazı Tipi ait

@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

Çoğu uygulamalar @font-face yazı yollara sorgu dizelerini sürümlü ekler. Bu sürümlü sorgu dizeleri, yazı tipi yeni bir sürüme güncellendiğinde önbelleği bozar. Yani, yazı tipini güncelleştirdiğinizde, sürümlü sorgu dizesi ?v=4.7.0'dan ?v=4.7.1'a değişecektir.

Çoğu durumda fazladan bir işlem yapmanız gerekmeyecektir çünkü çoğu uygulama bunu sizin için halledecektir. Unutmayın, diğer birçok @font-face jeneratörü ve paketi de bir versiyon paramını ekleyecektir. İşte birkaç örnek: Eğer http://fontawesome.io/ gelen yollara bağlı dahil font-awesome.css dosya sürüm olacak sorgu dizeleri Yazı Müthiş kiti indirirseniz

1. Yazı Müthiş kiti

   indirin. Ör.

   @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 sürüm sorgu dizesidir. Yazı Tipi Başarısının yeni bir sürümünü yoldan indirirseniz, bu sürüm numarası değişecektir.

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

   : Eğer CDN uygulamasını kullanıyorsanız CDN

   Müthiş

2. Yazı aşağıdaki CSS ithal edecek

   Bu gibi bir <script> içerecek şekilde alırsınız Font Awesome CDN'nin URL'leri, dahil edilen sürüm numarasına sahiptir ve güncellendiğinde, önbellek ve eliminati kırıldığında bu değişecektir. Bir sürümlü sorgu parametresi ekleme gereksinimi. Sass veya kullanma

3. Eğer sürüm sorgu dizesi eklenecektir Az/Sass dosyalarını kullanıyorsanız

   az. Ör.

   @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} güncel sürümünü (yazı tipi yoluna anda 4.7.0 ekler. Yazı güncellendiğinde güncellenir Bu sürüm numarası. Bu anlamda size fa-version değiştirerek tek seferde sürüm sorgu params güncelleyebilir #iefix karma ilişkin değişken.

#iefix

, bu sorunu çözmeye yönelik bir yöntem olup Tek bir src içinde birden çok yazı tipi biçimini tanımlarken IE8 ve altında. Eğer IE8 ve altında çalışmak için yazı tipine ihtiyacınız varsa, bu tarayıcılar hataları atmamak için #iefix (veya herhangi bir karma) eklemeniz gerekir. Bu konuda daha fazla SO question.

Diğer @ font-face yazı tipleri ve kendi önbellek büst oluşturmak için size harika Font dışında bir yazı tipi kullanıyorsanız veya başka bir uygulama, yazı tipi yolları üzerine bir karma ekleyebilirsiniz Eğer uygulamalar

. Gerekirse, manuel olarak veya bir komut dosyası aracılığıyla güncelleştirilebilen 01302017 gibi bir tarih dizesinin eklenmesi oldukça yaygındır.