1 024 Эта статья научит вас использовать @font-face с учётом кроссбраузерной совместимости, а также в ней будут рассмотрены сервисы, созданные для того, чтобы сделать использование нестандартных шрифтов в веб-дизайне ещё проще.
Реклама: купить живую новогоднюю елку
Веб-шрифты
Дни, когда вы были ограничены лишь горсткой веб-шрифтов, скоро останутся в прошлом. Проблемой является больше не нехватка жизнеспособных решений, а скорее их изобилие.
Такие технологии, как Cufon, sIFR, FLIR и @font-face представляются различными группами разработчиков, возлагающих надежды на то, что именно за их технологией будущее веб-типографии.
Но в этой постоянно развивающейся борьбе ещё нет никакого согласия. У всех этих методов есть совершенно справедливые аргументы «за» и «против».
Кроме того, даже самые популярные браузеры поддерживают эти технологии по-разному.
Однако, CSS метод @font-face — один из самых сильных, самых простых и самых гибких соперников в этой игре. Он явно лидер в данной области, привлекающий к себе внимание и помогающий подняться многим сайтам, которые предлагают, как бесплатные, так и платные шрифты, поддерживаемые этим методом.
Лицензирование и бесплатные шрифты
Лицензирование шрифтов представляет собой одну из сильнейших головных болей и камней преткновения отличной веб-типографии.
Естественно, производители шрифтов хотят, чтобы их работа была оплачена и поэтому устанавливают строгие ограничения на использование своих шрифтов.
Эти производители объединились с различными платными решениями @font-face, которые мы обсудим позже в отдельной статье, но сейчас мы полностью избежим проблемы лицензирования, используя бесплатные шрифты.
Проблема лицензирования шрифтов вызвала сильное повышение популярности сайтов, предлагающих качественные бесплатные шрифты. Среди них больше всего заметны два — это Font Squirrel и Fontex. Эти сайты предоставляют тонны отличных ресурсов абсолютно бесплатно, и даже сами используют многие из них.
Базовый синтаксис
@font-face требует только несколько строк CSS, и поэтому его очень легко использовать без каких-либо дополнительных инструментов.
Для начала, зайдите на любой сайт бесплатных шрифтов, упомянутый выше, и загрузите Chunkfive (или любой другой шрифт, который вам понравится).
Как только вы загрузили шрифт, поместите файл шрифта в корневой каталог вашей веб-страницы.
Теперь, перейдите к CSS и вставьте следующий код:
|
1 2 3 4 |
@font-face { font-family: Chunkfive; src: url('Chunkfive.otf'); } |
Этот код даёт пользовательскому шрифту идентификатор, который в дальнейшем будет использоваться в CSS, а затем указывает файл шрифта, который нужно использовать, когда применён данный идентификатор.
Первая строка в коде устанавливает идентификатор шрифта на “Chunkfive”. Вы можете указать любое название, какое хотите, но лучше всего не усложнять и всегда использовать название шрифта. Хотя “MyReallyCoolFont” работал бы точно также, если бы вы обращались к нему, указывая это название.
Вторая строка говорит браузеру, что, когда вызван “Chunkfive”, следует загрузить файл Chunkfive.otf из указанного url. Этот url — это адрес, куда вы поместили свой файл шрифта. Если бы вы поместили Chunkfive в папку под названием Fonts, этот атрибут читался бы, как url(Fonts/'Chunkfive.otf').
Когда вы хотите использовать этот шрифт где-то на своём сайте, просто создайте набор шрифтов, как это обычно делается, указав в начале идентификатор своего шрифта.
|
1 |
font-family: <strong>Chunkfive</strong>, Georgia, Palatino, Times New Roman, serif; |
Важно указывать дополнительные шрифты на тот случай, если нужный шрифт по каким-то причинам не работает.
Проверьте свой дизайн по крайней мере с одним из дополнительных шрифтов, чтобы гарантировать, что они не нарушат вашу разметку.
Вы должны получить страницу с работающим пользовательским шрифтом, хотя это может зависеть от вашего браузера.
Текст должен загрузиться немедленно, быть полностью выделяемым и работать с функциями копирования/вставки (ограничение других технологий замены шрифта).
Кроссбраузерная совместимость
Конечно, мы не можем ожидать того, что все браузеры будут работать правильно с @font-face!.
Все основные браузеры решили идти собственным путём, используя те форматы шрифтов, которые они хотят поддерживать.
- Internet Explorer поддерживает только EOT
- Браузеры Mozilla поддерживают OTF и TTF
- Safari и Opera поддерживают OTF, TTF и SVG
- Chrome поддерживает TTF и SVG.
Мобильные браузеры, такие как Safari на iPad и iPhone требуют формат SVG.
Всё ещё запутаны? Скорее всего, да. К счастью, есть замечательные разработчики, которые сделали всё для вас, разработав простые системы, к которым вы может обратиться.
Самый популярный метод использования @font-face с разными браузерами — возможно, Bulletproof @font-face syntax от Пауля Ириша.
Применяя метод Ириша, вы добавляете множество версий шрифта так, чтобы они работали во всех браузерах.
Кроме того, код содержит небольшую уловку, которая игнорирует шрифты с тем же названием, но установленные на локальном компьютере. Хотя загрузить локальный шрифт намного быстрее, было признано, что у подобного выполнения часто могут быть нежелательные результаты.
Давайте рассмотрим Bulletproof Syntax на примере Chunkfive:
|
1 2 3 4 5 6 7 8 9 10 |
@font-face { font-family: 'ChunkFiveRegular; src: url('Chunkfive-webfont.eot); src: local(‚ò∫'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; } |
Как и прежде, сначала мы объявляем идентификатор для нашего шрифта.
Затем, мы обращаемся к EOT версии шрифта для IE. Если используемый браузер не IE, он проигнорирует этот код и перейдёт к следующей строке и т.д., пока не найдёт поддерживаемый шрифт.
src:local — это и есть та самая уловка, о которой шла речь выше. По существу, это указание браузеру использовать вымышленное название шрифта, которое не может присутствовать на вашем компьютере, таким образом, у вас не будет отображён неправильный шрифт.
Наконец, установите font-weight и font-style на normal, это гарантирует то, что все браузеры установят те же значения. Это делается для того, чтобы вы могли применить стили faux bold или italic позже в CSS коде. Без этого, браузеры Webkit проигнорируют любые команды weight или style.
Имейте в виду, что отображение шрифта может сильно меняться в зависимости от браузера и операционной системы. Многие разработчики испытывали большие сложности с Windows и Internet Explorer, и поэтому они избегают использование пользовательских шрифтов. Всегда следует проверять свои результаты во всех браузерах и операционных системах, в которых только возможно, чтобы решить для себя, является ли качество приемлемым.
Где взять различные форматы шрифтов?
Вы наверное обратили внимание на то, что предыдущий метод требует наличие у вас по крайней мере четырёх различных версий каждого шрифта, который вы используете. Многие источники шрифтов, вроде Fontex, часто предоставляют только один тип шрифта для загрузки. Так что же делать, если у вас есть только один файл шрифта?
Font Squirrel
Ответ — добавить в закладки Font Squirrel. Font Squirrel предлагает множество бесплатных комплектов @font-face, в сущности, вы можете в один клик загрузить всё, что вам нужно для работы с пользовательскими кроссбраузерными шрифтами.
Каждый комплект включает в себя все форматы шрифта, которые вам нужны, а также примеры их реализации в HTML и CSS файлах, т.е. все, что требуется для работы.
Всё, что вам нужно — это загрузить комплект, извлечь файл шрифта и фрагмент CSS кода, и вы готовы приступить к работе! CSS код, используемый Font Squirrel основан на методе bulletproof @font-face syntax от Пауля Ириша, который мы рассматривали выше, таким образом вы можете быть уверены в том, что это лучший метод, доступный в настоящее время, который гарантирует поддержку шрифтов максимальным количеством пользователей.
@font-face Kit Generator
Что нужно, если у FontSquirrel нет нужного вам комплекта? Это не проблема. Если у вас есть шрифт, который вы получили из другого источника, просто зайдите в Font Squirrel @font-face kit generator. Всё, что нужно сделать — это загрузить ваш файл шрифта, и этот удивительный инструмент автоматически сконвертирует его во все необходимые форматы, после чего сгенерирует комплект, который вы сможете скачать.
Обратите внимание на то, что использование @font-face Kit Generator означает, что вы гарантируете то, что у вас есть право/лицензия на конвертирование и использование файла шрифта, который вы загружает на сайт.
Этот сервис является полностью бесплатным, и вы можете пользоваться им без регистрации.
Популярные сервисы @font-face
Как мы говорили в начале этой статьи, возникло несколько сервисов, предлагающих как бесплатные, так и платные решения для упрощения реализации @font-face.
Ниже приведён список некоторых из самых популярных сервисов, доступных в настоящее время.
Google Font API
Google Font API — одно из самых простых и самых новых решений для включения пользовательских шрифтов в ваш дизайн.
Используя этот API, вы просто выбираете шрифт из Google Font Directory и вставляете нужный фрагмент кода в тег <head> своего HTML документа. Впоследствии, вы можете обращаться к этому шрифту в своём CSS коде, так же, как вы, обычно, обращаетесь к любому другому шрифту.
Все шрифты из Google Font Directory бесплатные и открытые. Однако обратная сторона медали в том, что в настоящее время доступно всего 32 варианта шрифтов для кириллицы (всего 480 вариантов шрифтов). Google Fonts API также не включает SVG версию, таким образом, пока нет никакой поддержки мобильными устройствами.
TypeKit
TypeKit был одним из первых сервисов, которые стали специализироваться на упрощении реализации @font-face. Команда TypeKit сотрудничала с производителями шрифтов со всего мира, чтобы предоставить вам сотни превосходных шрифтов без каких-либо проблем с лицензированием, пока вы пользуетесь сервисом.
Есть бесплатная испытательная схема, которая позволяет вам пользоваться ограниченным числом шрифтов на единственном сайте.
Цены на платные схемы колеблются от $24.99 в год для двух сайтов, до $99.99 в год для неограниченного количества сайтов.
Typotheque
Typotheque позволяет вам купить любой из предоставляемых шрифтов для использования в веб. Хорошая сторона этого сервиса в том, что вместо годового плана нужна только разовая плата за покупку шрифта. Как только вы приобрели нужный вам шрифт, просто скопируйте и вставьте предоставленный код CSS, и всё готово!
Fonts Live
Fonts Live — ещё один сервис, который заботится о сложных проблемах лицензирования, предоставляя вам сотни высококачественных шрифтов от лучших дизайнеров и производителей.
С Fonts Live, вы покупаете каждый шрифт отдельно и платите ежегодную плату за его использование. Как только вы покупаете шрифт, вам предоставляются простые фрагменты кода, необходимые для включения шрифтов в ваш сайт.
Kernest
Система Kernest почти идентична Google Font API. Просто найдите шрифт, который вам понравится, вставьте нужную ссылку в тег <head> вашего HTML документа, и можете начинать использовать шрифт в своём CSS.
В Kernest доступно множество, как платных, так и бесплатных шрифтов. К сожалению, система просмотра Kernest.com пытается одновременно загрузить большое количество шрифтов и поэтому может быть крайне медленной и трудной в использовании. Приготовьтесь к отказу браузера, если натыкаетесь на страницу с большим количеством предпросмотров.
Выводы по @font-face
Теперь вы должны быть во всеоружии, чтобы начать пользоваться прекрасными шрифтами в своём дизайне. Используя всего несколько строк CSS и бесплатные веб-сервисы (или загрузив свои файлы, как описано выше), вы можете создать собственный набор @font-face, который будет работать во всех основных браузерах и не будет вам ничего стоить.
Если бесплатные решения не предоставляют достаточного выбора, а мысли о лицензировании шрифта вызывают у вас головную боль, посетите сервисы, которые кроме всего прочего заботятся о сложном юридическом материале, и даже о большей части кода, делая использование платных онлайн шрифтов чрезвычайно простым.
