6

На сайте 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;
}

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

5
  • а это штука не удаляется ?r3waic ?
    – user33274
    29 мая 2017 в 4:34
  • удаляется, но тогда иконочный шрифт без этого кэша не работает. 29 мая 2017 в 4:38
  • у меня ни разу такого не было .. работало всегда без этого Кэш
    – user33274
    29 мая 2017 в 4:39
  • Этот-то не нужно удалять, достаточно было отредактировать. Восстановил, убрал вторую часть. )
    – Nick Volynkin
    29 мая 2017 в 5:49
  • На счет удаление кэша "?r3waic" в пути и подключения, то шрифт все же работает, но не понятно принадлежность этого кэша. 29 мая 2017 в 6:09

1 ответ 1

5

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

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.

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

5
  • Подскажите пожалуйста, как учитывать этот момент при написании миксина? И где в спецификации прописан этот момент, то есть как парсер понимает к чему относиться эта строчка и как она относиться к самому шрифту(она внутри шрифта где - то прописана "r3waic")? 29 мая 2017 в 10:16
  • Нет, внутри шрифта нигде не прописана. Я обычно просто добавляю ко всем подобным ссылкам параметр ?v=22, и когда мне нужно - увеличиваю 22 на единичку вверх. 29 мая 2017 в 11:15
  • то есть по сути этот текст не несет ни какой смысловой нагрузки. он нужен что бы просто браузер увидел разницу между кэшированной ссылки и новой. я правильно понял? 29 мая 2017 в 12:21
  • Да, именно так, все верно. 29 мая 2017 в 12:46
  • url("../fonts/Exo2/Exo2-Bold/Exo2-Bold.svg#Exo 2") format("svg"); } вы не подскажите зачем у svg в конце пути #Exo? 15 ноя 2017 в 13:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.