Страницы

Поиск по вопросам

пятница, 26 октября 2018 г.

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

На сайте 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
В итоге ссылки на файлы "изменятся", и браузер скачает новые версии файлов, вместо того, чтобы взять старые из кеша.

Комментариев нет:

Отправить комментарий