От автора: я не думаю, что это часто встречаемая болезнь или что-то подобное, но я видел, как это делали несколько раз и даже настаивали на этом. Вот, что я имею в виду…
Когда вы решаете сделать подключение шрифтов font face, то переходите в Google Fonts и выбираете шрифт, например, Open Sans, и он дает вам либо ссылку <link>, либо @import с URL-адресом, по которому должен быть готов шрифт для использования на вашем сайте.
Вы можете заглянуть туда и посмотреть, что он вернет …
Разумеется, это всего лишь несколько объявлений шрифта @font-face!
Теперь в дело вступает ваш разум, ориентированный на производительность. Подождите. Итак, я выполняю один HTTP-запрос для этой таблицы стилей, а затем она выполняет другие HTTP-запросы для этих файлов woff2, которые она привязывает. Среднестатистический пользователь мог бы подумать — почему бы просто не скопировать эти блоки шрифтов прямо отсюда и не использовать их.
Можно и так! Но!
Проблема в том, что здесь Google придумывает разные причудливые гугловские вещи, и содержимое этой оригинальной таблицы стилей изменяется на основе запроса браузера. Снимок экрана выше взят из Chrome 66. А вот Firefox 20 на Windows 7:
Все по-другому! Здесь только woff, а не woff2. Если мы откроем этот URL-адрес в IE 8, мы получим блок @font-face, включающий формат eot!
Дело в том, что то, что дает этот URL-адрес очень специфичным для того, что нужно текущему браузеру. Это довольно крутая вещь. Если новые браузеры имеют новые форматы и им нужен новый синтаксис CSS, это будет довольно просто сделать.
Не то, чтобы Google Fonts идеально подходил для этих вещей. Например, не контролируя собственные блоки шрифтов @font-face, вы не можете воспользоваться преимущества font-display, что, конечно, не есть хорошо. Может быть, мы когда-нибудь сможем это сделать, или, может быть, стоит разместить на своем сервере Google Fonts, и это еще одна вещь, о которой мы когда-нибудь подробно расскажем.
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.
