Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

От автора: я не думаю, что это часто встречаемая болезнь или что-то подобное, но я видел, как это делали несколько раз и даже настаивали на этом. Вот, что я имею в виду…

Когда вы решаете сделать подключение шрифтов font face, то переходите в Google Fonts и выбираете шрифт, например, Open Sans, и он дает вам либо ссылку <link>, либо @import с URL-адресом, по которому должен быть готов шрифт для использования на вашем сайте.

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Вы можете заглянуть туда и посмотреть, что он вернет …

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Разумеется, это всего лишь несколько объявлений шрифта @font-face!

Теперь в дело вступает ваш разум, ориентированный на производительность. Подождите. Итак, я выполняю один HTTP-запрос для этой таблицы стилей, а затем она выполняет другие HTTP-запросы для этих файлов woff2, которые она привязывает. Среднестатистический пользователь мог бы подумать — почему бы просто не скопировать эти блоки шрифтов прямо отсюда и не использовать их.

Можно и так! Но!

Проблема в том, что здесь Google придумывает разные причудливые гугловские вещи, и содержимое этой оригинальной таблицы стилей изменяется на основе запроса браузера. Снимок экрана выше взят из Chrome 66. А вот Firefox 20 на Windows 7:

Подключение шрифтов: не копируйте просто @font-face CSS из URL-адресов Google Fonts

Все по-другому! Здесь только 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.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree