Что это за кэш?

#css #css3 #scss #шрифты

На сайте Icomoon сделать иконочный шрифт и в исходниках в пути к шрифту было это
"?r3waic".

Подскажите пожалуйста что это за кэш? Что будет если без него использовать шрифт
и вообще как правильно поступить в верстке.



@font-face {
  font-family: 'Icomoon';
  src:  url('#{$icomoon-font-path}/Icomoon.eot?r3waic');
  src:  url('#{$icomoon-font-path}/Icomoon.eot?r3waic#iefix') format('embedded-opentype'),
    url('#{$icomoon-font-path}/Icomoon.ttf?r3waic') format('truetype'),
    url('#{$icomoon-font-path}/Icomoon.woff?r3waic') format('woff'),
    url('#{$icomoon-font-path}/Icomoon.svg?r3waic#Icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'Icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}




Итог: Мне нужно понять как использовать этот кэш.
    

Ответы

Ответ 1

Все из-за того, как в браузерах работает кеш.

Icomoon - генерируемый шрифт с иконками. Представьте ситуацию, когда в уже используемый
у себя на сайте пак вы добавляете пару иконок. Добавили, сгенерировали файлы шрифтов,
обновили их на хостинге. Но названия файлов остались те же (Icomoon.ttf и т.д.).

Что же будет, если в стилях будут прямые ссылки на файлы?

@font-face {
  font-family: 'Icomoon';
  src:  url('#{$icomoon-font-path}/Icomoon.eot');
  src:  url('#{$icomoon-font-path}/Icomoon.eot#iefix') format('embedded-opentype'),
    url('#{$icomoon-font-path}/Icomoon.ttf') format('truetype'),
    url('#{$icomoon-font-path}/Icomoon.woff') format('woff'),
    url('#{$icomoon-font-path}/Icomoon.svg#Icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}


Браузер скачает Icomoon.ttf и закеширует. После добавления пары иконок файлы вы обновили,
но название файла не изменилось. И ссылки на них не изменились. Браузер это видит -
и использует старые кешированные версии файлов.

Как дать браузеру понять, что файлы изменились? Варианта два:


Менять имена файлов (так, например, работают ассеты в Ruby on Rails);
Добавлять к ссылкам случайный параметр, который менять вместе с файлами.


У вас - второй случай. Параметр r3waic - случайно сгенерированная строка. При перегенерации
шрифтов сайт Icomoon должен выдать вам новые стили с новым псевдослучайно сгенерированным
параметром, например с vf41cd.

В итоге ссылки на файлы "изменятся", и браузер скачает новые версии файлов, вместо
того, чтобы взять старые из кеша.