Строка запроса Concat на шрифт-face url

Question

Чтобы избежать кеширования браузера, я хочу, чтобы последовательность строк запроса была указана на моем url @font-face. Есть много 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 Потрясающие добавит версионируются строки запроса к @font-face путей шрифта. Эти строки с версией запроса будут перегружать кеш, когда шрифт будет обновлен до новой версии. То есть, когда вы обновляете шрифт, строка с версией запроса будет меняться от ?v=4.7.0 до ?v=4.7.1.

В большинстве случаев вам не нужно ничего делать, поскольку большинство реализаций справятся с этим для вас. Имейте в виду, что многие другие генераторы и пакеты @font-face также добавят параметр версии. Вот несколько примеров:

1. Скачать Удивительным Kit Шрифт

   Если вы загружаете Удивительный набор шрифтов из http://fontawesome.io/ включенный font-awesome.css файл будет версированы строки запроса, прикрепленные к путям. 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 по дороге.

2. шрифт Высокий CDN

   Если вы используете реализацию CDN вы получите <script> включать, как

   Это будет импортировать следующий CSS:

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

   URL-адреса для шрифта Awesome CDN содержат номер версии, и это изменится при обновлении, разбив кеш и устранив Необходимость добавления параметра версии.

3. Использование Sass или менее

   Если вы используете Меньше/Sass файлы версированной строка запроса будет добавлены. 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 на пути шрифта. Этот номер версии будет обновляться, когда шрифт обновляется. В этом смысле можно обновить все версии запроса Params сразу, изменив fa-version переменный.

#iefix

Что касается #iefix хэша, это способ фиксации вопроса в IE8 и ниже при определении нескольких форматов шрифтов в одном src. Если вам нужен ваш шрифт для работы в IE8 и ниже, вам нужно добавить #iefix (или любой хэш), чтобы эти браузеры не бросали ошибки. Подробнее об этом в этом SO question.

Других @ шрифт лицу шрифты и Реализации

Если вы используете шрифт, отличный от шрифта Awesome, или другая реализация, вы можете добавить в конец хэша на путь шрифта, чтобы создать свой собственный кэш-бюст , Достаточно часто видеть добавленную строку даты, например 01302017, которая может быть обновлена ​​вручную или с помощью скрипта сборки, когда это необходимо.