На сайте 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;
}
Итог: Мне нужно понять как использовать этот кэш.
Ответ
Все из-за того, как в браузерах работает кеш.
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
В итоге ссылки на файлы "изменятся", и браузер скачает новые версии файлов, вместо того, чтобы взять старые из кеша.
Комментариев нет:
Отправить комментарий