В двух первых статьях мы расскажем обо всех особенностях подключения шрифтов. От форматов до кроссдоменности. Разберемся с оптимизацией и дескрипторами. Это будет выжимка из нашего опыта работы над проектом.
На сегодняший день разными браузерами и платформами в той или иной мере поддерживаются форматы eot, woff, ttf, svg.
Самыми легковесными являются форматы woff и eot. Например, разница между woff и ttf может достигать 100%.
Исходя из поддержки форматов браузерами, мы теперь можем составить @font-face, который будет работать везде, включая мобильные браузеры.
@font-face { font-family: 'PT Sans'; src: url('ptsans.eot'); src: url('ptsans.eot?#iefix') format('embedded-opentype'), url('ptsans.woff') format('woff'), url('ptsans.ttf') format('truetype'); }
Разобравшись с форматами и подключением, давайте приступим к оптимизации. Из первого пункта мы уже узнали, что самые легковесные форматы — это woff и eot, которых хватает как раз для того, чтобы покрыть все существующие десктопные браузеры. Таким образом, если вы не планируете поддерживать мобильные устройства, то font-face будет выглядеть вот так:
@font-face { font-family: 'PT Sans'; src: url('ptsans.eot'); src: url('ptsans.eot?#iefix') format('embedded-opentype'), url('ptsans.woff') format('woff'); }
Кроме этого, у font-face есть еще одно правило, которое позволяет оптимизировать загрузку вашей страницы — это local. C помощью него мы можем проверить наличие шрифта на компьютере пользователя, и если таковой отсутствует, инициировать его загрузку. В local указывается полное наименование шрифта и его PostScript Name.
Вот такая запись font-face проверит наличие шрифта на компьютере:
@font-face { font-family: 'PT Sans'; src: url('ptsans.eot'); src: local('PT Sans'), local('PTSans-Regular'), url('ptsans.eot?#iefix') format('embedded-opentype'), url('ptsans.woff') format('woff'); }
Для мобильных браузеров, в которых работает ttf, используйте gzip-сжатие файлов шрифтов. В результате вы получите экономию в весе до 40%.
Шрифты — это статика, которую многие предпочитают хранить на каком-нибудь отдельном домене, где настроено кэширование, или на стороннем хранилище(в облаке). Однако при загрузке шрифта с другого домена возникают проблемы в Firefox и Internet Explorer. Все дело в политике безопасности этих браузеров, они не позволяют загружать шрифты со сторонних доменов и даже с поддоменов.
Проблему можно решить переводом шрифта в base64 и поместить его в CSS. При этом надо учитывать, что шрифт в base64 весит больше оригинала и он загрузится всегда, в независимости от того используется он на загружаемой странице или нет.
Еще одним решением проблемы является управление политикой безопасности на домене, с которого идет загрузка файла шрифта. Для сервера на Apache в .htaccess можно прописать Access-Control-Allow-Origin *. Такая запись позволит всем доменам загружать контент с отдающего сервера. Для IE и Firefox этого достаточно.
На этом мы закончим первую часть. В следующей части расскажем про плюсы и минусы подключения шрифтов через font-family и font-weight\font-style. В результате покажем итоговый font-face.
Комментарии
comments powered by Disqus