Правильный порядок подключения шрифта разного формата?

Question

[Олжас Калиев]

Объясните, пожалуйста, правильный порядок подключения шрифта разного формата (eot, woff, woff2, otf, ttf, svg, local)

в основном порядок тот в котором я перечислил выше, но на https://developers.google.com/web/fundamentals/per... порядок обратный.

вроде бы в итоге браузер выбирает только один формат, но влияет ли порядок подключения шрифтов на то, на каком шрифте он остановится?

Answer 1

[Kjuri]

По этому поводу ясно написано в этой гугловской статье , что да порядок влияет (но не каскад CSS). Берется первый поддерживаемый шрифт. От себя могу добавить, специально это проверяла - так и есть. Поставишь сначала woff2 - возьмет его, ну или в вашем случае eot для ie и woff остальных.

Answer 2

[Михаил]

всегда думал что не влияет

Answer 3

[Vladislav Dragalev]

Возможно гугл что-то знает) если первым указывать local, то при нахождении шрифта в системе, он не будет лишний раз загружаться.

Answer 4

[Дима Паутов]

Каскадная таблица стилей! Этим все сказано. Подключите 4 картинки через css разного формата

body {
background-image: url('img/img1.gif');
background-image: url('img/img1.jpg');
background-image: url('img/img1.png');
background-image: url('img/img1.webp');
}

Какая из низ в итоге отобразиться в браузере? С учетом того, что браузер понимает все указанные форматы

Comments

[Олжас Калиев]

webp.
Хотите сказать, что в конечном итоге везде на сайтах работают шрифты ttf? )

[Дима Паутов]

olzhas_kaliyev: посмотрите поддержку браузерами! В моем примере, старый ie не поймет формат webp и подключит png