Для чего в шрифтах форматы EOT и WOFF?

Question

[Ingernirated]

Всегда замечал эти расширения, но не скачивал их, т.к. мне казалось ttf это основа для веб.
А тут наткнулся на руководство, где все 3 расширения скачивают в проект.

Comments

[WapSter]

Это же гуглиться все быстро

Answer 1

[SagePtr]

eot - для старых версий Internet Explorer
woff и woff2 - современные форматы шрифтов для веб (весят меньше, чем ttf)
woff2 более современный и весит ещё меньше, чем woff, но меньшая поддержка старыми браузерами
https://caniuse.com/#search=eot
https://caniuse.com/#search=ttf
https://caniuse.com/#search=woff
https://caniuse.com/#search=woff2

Comments

[Ingernirated]

Но добавляя все 3 расширения шрифтов, получается браузер все скачает и выйдет в 2.5 раза больше трафика на них, чем просто на один ttf.
Или можно подключить просто woff и забить на старый эксплорер?

@font-face {
font-family: 'Rex Light';
src: url('RexLight.eot');
src: url('RexLight.eot?#iefix') format('embedded-opentype'),
url('RexLight.woff') format('woff'),
url('RexLight.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

[SagePtr]

Ingernirated, нет, браузер проигнорирует неподдерживаемые форматы, а из поддерживаемых - выберет наилучший для него (приоритет у нормальных браузеров: woff2, woff, ttf, у IE - не тестировал)

Answer 2

[Вадим Кот]

У гугла даже отдельная статья по шрифтам есть https://developers.google.com/web/fundamentals/per... специально для вас) и там все необходимые форматы шрифтов рассмотрены