Svg иконки, какие расширения лучше исполльзовать woff-ttf-svg-eot?

Question

[Антон Вебсайтовский]

Всем привет кто читает данную статью.

Давно начал использовать svg, подгружаю я все эти типы файлов woff-ttf-svg-eot, вот задаюсь вопросом, может давно некоторые типы уже не актуальны давно и можно не использовать, да и сайт чуть быстрее грузиться будет.

То что я гружу:

@font-face {
  font-family: icon;
  src: url(icon/icon.eot?b5upk4);
  src: url(icon/icon.eot?b5upk4#iefix) format('embedded-opentype'), 
url(icon/icon.ttf?b5upk4) format('truetype'), 
url(icon/icon.woff?b5upk4) format('woff'), 
url(icon/icon.svg?b5upk4#icon) 
format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

Comments

[Softlink]

Устарели почти все, если говорить о формате шрифтов. Сейчас достаточно woff и woff2, а svg в font-face и вовсе не поддерживается уже большинством браузеров.

[Антон Вебсайтовский]

Softlink, а как щас делают? как используют? то есть и .svg не нужен, можно тупо .woff и все, говорят это (woff для ie).

[Softlink]

Антон Вебсайтовский, сейчас использовать иконочные шрифты считается несколько моветоном, т.к. можно сразу использовать свг, в том числе в спрайтах. Но все как всегда зависит от обстоятельств, и если вам нужен иконочный шрифт, то можно использовать всего два формата: woff для ие 9,10,11 и первых версий edge, а для всего остального - woff2.

[Антон Вебсайтовский]

Softlink, ага понял, то есть спрайты это что? формат для иконок, куда можно загружать svg иконки. я читал но не совсем понял. что по объему будет меньше занимать, вот что интересно.

[Антон Вебсайтовский]

Вот это не оно?

[Softlink]

Антон Вебсайтовский, похоже на спрайт

[Антон Вебсайтовский]

Так что выходит, чтоб вставить иконку в html, мне надо вставлять вод этот код

<svg class="icon icon-alcohol"><use xlink:href="#icon-alcohol"></use></svg>

(чет какой-то длинный он).

Обычный метод который я использую это

Этот код я так понял можно в css хранить.

<symbol id="icon-alcohol" viewBox="0 0 32 32">
<path d="M16 0c-8.822 0-16 7.178-16 16s7.178 16 16 16 16-7.178 16-16-7.178-16-16-16zM29.58 16c0 3.309-1.19 6.345-3.165 8.704l-3.915-3.915c1.494-0.622 2.432-2.373 2.162-4.256-0.132-0.926-0.55-1.936-1.168-2.696h-4.399c-0.559 0.687-0.953 1.578-1.121 2.427l-0.798-0.798v-1.277c0-1.408-0.832-2.624-2.030-3.185v-4.747c0.095-0.126 0.153-0.282 0.153-0.453v-0.076c0-0.415-0.337-0.752-0.753-0.752h-1.769c-0.416 0-0.753 0.337-0.753 0.752v0.076c0 0.171 0.057 0.327 0.153 0.453v4.21l-4.882-4.882c2.359-1.975 5.395-3.165 8.704-3.165 7.488 0 13.58 6.092 13.58 13.58zM22.129 23.941v-0.101l0.101 0.101h-0.101zM2.42 16c0-3.309 1.19-6.345 3.165-8.704l5.072 5.072c-0.323 0.531-0.509 1.155-0.509 1.821v10.746c0 0.244 0.197 0.441 0.44 0.441h6.148c0.243 0 0.441-0.197 0.441-0.441v-6.047l3.286 3.286v1.767h-0.658c-0.239 0-0.432 0.193-0.432 0.432v0.584c0 0.239 0.193 0.432 0.432 0.432h2.982c0.239 0 0.432-0.193 0.432-0.432v-0.027l1.486 1.486c-2.358 1.975-5.395 3.165-8.704 3.165-7.488 0-13.58-6.092-13.58-13.58z"></path>
</symbol>

Ну и стиль для иконки данной

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

Answer 1

[Антон Вебсайтовский]

Так если не ошибаюсь, то все форматы прописывать это хорошо, не все сразу они грузятся.
Ход подгрузки вроде такой.

@font-face { 
  font-family: 'Web font'; 
  src: url('webfont.woff2') format('woff2'), 
       url('webfont.ttf')  format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ 
       url('webfont.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal; 
}

На developers.google приводится пример как браузер определяет, что для отображении сайта нужен какой-либо шрифт, он читает предоставленных список ресурсов в указанном порядке и старается скачать нужный шрифт.
1)Браузер читает разметку страницы и определяет, какие варианты шрифтов нужны для отрисовки текста.
2)Браузер проверяет, не установлены ли нужные шрифты на устройстве.
3)Если файла нет на устройстве, браузер читает список внешних расположений:
4)Если формат указан, перед скачивание браузер проверяется, поддерживается ли он. В случае отрицательного ответа программа переходит к следующему варианту.
5)Если указание на формат отсутствует, браузер скачивает ресурс.

Но это шрифт, а у меня вопрос по иконки ) svg

Answer 2

[archelon]

шрифты — woff2 и woff (для IE)
другие форматы уже не нужны

Comments

[Антон Вебсайтовский]

То есть можно использовать .svg, для всех браузеров, и woff для ie.

[Максим]

Антон Вебсайтовский, к примеру fonts.google.com использует woff2 и это не для ie

[Антон Вебсайтовский]

Много Чего, я свои иконки же могу переделать в woff2 ?

[Максим]

Антон Вебсайтовский, ну точно прям в woff2 не знаю но есть типа генератор шрифтов (онлайн) он сразу генерирует нужные наборы

[Антон Вебсайтовский]

Много Чего, ну да, там в наборе все, то что я показывал, но ведь все не нужно, говорят woff2 хватит и все.

[Максим]

Антон Вебсайтовский, подключать надо все - так как кто то использует последний windows chrome а кто то мобильную оперу а кто то смотрит сайт с apple safari а я к примеру с линукса midori

я конкретно не помню какой формат шрифта и для какой системы или же браузера - но подключать надо ВСЕ для совместимости

[Антон Вебсайтовский]

Много Чего, ну вот ))) по этому все я и использую )) решил узнать, может я устарел ) и давно пора выкинуть ненужное и не использовать.

[Антон Вебсайтовский]

Поддерживает браузера woff2 https://caniuse.com/woff2