@font-facе: основное руководство

Ноя 15, 2010 HTML & CSS

Шрифты в Интернете.
Дни, когда мы были ограничены имеющимися в интернете шрифтами, уже практически ушли в прошлое. Сегодня проблем с наличием шрифтов не существует, но возникла проблема в разрешении на их использование.

Технологии, наподобие Cufon, sIFR, FLIR и @font-face созданы разными группами веб-разработчиков с их собственным пониманием, как будут выглядеть тексты в интернете не в столь далеком будущем.

На данный момент еще не существует единого мнения насчет этого. Все имеющиеся методы показывают как свои сильные, так и слабые стороны.

Более того, даже самые популярные браузеры поддерживают каждую из данных технологий совершенно в различной степени.

Однако CSS метод @font-face — один из самых сильных, и в то же время простых и гибких конкурентов в данной игре. В настоящее время он кажется светящейся звездой на небе, привлекая всеобщее внимание и порождая все большее число сайтов с их предложениями бесплатных и лицензионных наборов шрифтов, а также их поддержку.

Данное руководство научит вас, как установить @font-face в соответствии с меж-браузерной совместимостью, а также расскажет о ряде возникших служб поддержки, обеспечивающих облегченное использование персональных шрифтов в вашем веб-проекте.

Бесплатные и лицензионные шрифты

Лицензионные шрифты представляют собой наибольшую головную боль и блокируют развитие шрифтового оформления интернета.

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

Данные разработчики объединились для создания различных лицензионных @font-face шрифтов, которые мы обсудим чуть позже в данном руководстве. Сейчас же мы просто откинем эту «лицензионную» проблему в сторону и будем использовать бесплатный шрифт.

Проблема с лицензированными шрифтами в интернете сразу повысило рейтинг сайтов, предлагающих качественные бесплатные шрифты. Два сайта, наиболее любимых мною — Font Squirrel и Fontex. Оба этих сайта предлагают тонны необходимых ресурсов совершенно бесплатно и даже делятся многими разновидностями одного и того же шрифта.

Основной синтаксис

Для использования @font-face необходимо всего несколько строк CSS кода и поэтому очень легок в применении без каких-либо дополнительных средств.

Для начала загляните на один из сайтов, предоставляющих бесплатные шрифты, упомянутые выше, и скачайте Chunkfive (или любой другой понравившийся вам шрифт).

После этого, поместите файл шрифтов в корневой каталог вашей веб-страницы.

Теперь откройте ваш стилевой файл и вставьте следующий код:

@font-face {
font-family: Chunkfive;
src: url('Chunkfive.otf');
}

Данный сниппет (короткий текстовый код) предоставляет персональному шрифту идентификатор для распознавания в CSS и указывает на файл шрифтов, к которому необходимо обратиться при запросе данного шрифта.

Первая строка моего кода устанавливает идентификатор «Chunkfive» для шрифта. Постоянное использование названия шрифта облегчает весь процесс создания сайта, так что обязательно используйте любое нравящееся вам название. Например, вы можете написать «MyReallyCoolFont» (мой действительно классный шрифт) и указать расположение файла, хранящего шрифт с таким же названием.

Вторая строка заставляет браузер при команде «Chunkfive» загрузить файл Chunkfive.otf с указанной url. Данная url -любое место куда вы решили поместить ваш файл с шрифтами. Если вы загрузили Chunkfive в папку под названием Шрифты, данные реквизиты будут считаны url(Fonts/'Chunkfive.otf').

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

font-family: Chunkfive, Georgia, Palatino, Times New Roman, serif;

Очень важно установить данные для работы в аварийном режиме, в случае если ваш персональный шрифт по какой-то причине не работает.

Обязательно проверьте дизайн вашего сайта как минимум с одним из ваших аварийных шрифтов для обеспечения бесперебойной работы вашего сайта.

В зависимости от вашего браузера, вы получите страничку с рабочим персональным шрифтом.

Текст должен загружаться незамедлительно, возможность выбора текста должна присутствовать и работать с такими функциями компьютера, как копировать/вставить (что становится невозможным при использовании других способов замены шрифта).

пример использования Chunkfive в блоке текстового HTML.

Меж-браузерная совместимость

Легкая возможность использования персональных шрифтов онлайн была бы прекрасна, но все обстоит несколько иначе.

Конечно же, мы не можем просто ожидать, что все браузеры будут хорошо работать и соглашаться со всеми нашими действиями! Это будет просто необоснованно.

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

• 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:

@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 (стиль шрифта) на стандартные обеспечит работу всех браузеров в режиме по умолчанию в пределах данных параметров. В результате вы сможете применить «faux bold» или «italic style» в CSS позже. Без данного сниппета, браузеры Webkit будут игнорировать все команды относительно веса и стиля шрифтов.

Не забудьте, что отображаемые шрифты могут сильно отличаться среди различных браузеров и операционных систем. Многие из разработчиков добились ужасно плохих результатов, работая с Windows и Internet Explorer , так что теперь они просто избегают использования каких-либо персональных шрифтов. Не забудьте постоянно проверять свои результаты на всех браузерах, где только возможна проверка, чтобы выяснить допустимо ли полученное вами качество.

Где взять все эти виды шрифтов?

Вы наверняка заметили, что описанный выше метод требует наличие как минимум четырех видов каждого используемого персонального шрифта. Многие из ресурсов шрифтов, такие как Fontex, обычно предоставляют только один вид шрифта для скачки. Что же делать в этом случае?

Сайт «Font Squirrel»
Ответ прост — добавьте сайт Font Squirrel в список ваших избранных сайтов. Font Squirrel предлагает множество различных бесплатных наборов free @font-face kits, которые можно запросто скачать одним щелчком мышки. Здесь вы найдете любые персональные меж-браузерно совместимые шрифты.

Каждый набор состоит из четырех видов шрифта, которые вам необходимы, а также демонстрационные файлы для начала работы с HTML и CSS.

Все, что требуется сделать — это скачать набор, установить файлы шрифтов и CSS сниппет, и вы готовы к старту! CSS, используемый в Font Squirrel основан на bulletproof @font-face синтаксисе, описанный выше. Поэтому можно быть уверенным, что это наилучший доступный на сегодняшний день метод для удовлетворения нужд большинства пользователей.

Генератор Набора @font-face

Что делать если вы не смогли найти необходимый вам шрифт на сайте FontSquirrel? Не беспокойтесь. Если у вас есть шрифт, скачанный в другом месте, просто воспользуйтесь генератором Font Squirrel @font-face kit generator. Загрузите туда ваш файл шрифта и этот удивительный генератор автоматически создаст необходимые виды шрифта, а также их набор для последующей скачки.

Обратите внимание, что используя генератор наборов @font-face, вы гарантируете наличие прав/лицензии для использования и изменения загруженных на сайт файлов.

Данный сайт совершенно бесплатный и вы можете пользоваться им без регистрации.

Широко используемые службы поддержки @font-face

Как я и говорил в начале статьи, некоторые службы поддержки предлагают как бесплатные, так и платные решения для облегчения работы с @font-face.

Внизу предоставлен список самых известных служб поддержки, действующих в настоящее время.

Google Font API предоставляет одно из самых простых и новых решений для использования персональных шрифтов в вашем дизайне.

Используя данный API, вы можете просто выбрать шрифт из списка Google Font Directory и взять сниппет кодов, устанавливаемых во вкладке ваших HTML документов. После этого необходимо выполнить все действия со шрифтом вашего CSS, наподобие тех, что выполняются обычно. Специального CSS для @font-face не требуется (все это регулируется вне зависимости от вас).

Все шрифты списка Google Font Directory бесплатны и взяты с открытых ресурсов. Отрицательная сторона заключается в том, что в настоящее время на этом сайте доступно менее 20 видов шрифтов. Кроме того, 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. Просто выберите понравившийся вам шрифт, скачайте ссылку и вставьте вкладку «» в ваш HTML документ. Теперь вы можете начать использовать данный шрифт в вашем CSS.

Kernest предоставляет как платные, так и бесплатные шрифты. К сожалению, браузерная система Kernest.com позволяет множественную загрузку одновременно и поэтому бывает очень медленным и трудным в использовании. Сайт может просто зависнуть, если вы зайдете на страничку, где расположено слишком много демонстрационных просмотров.

Вставка @font-face

Теперь вы полностью подготовлены к использованию красивых персональных шрифтов в дизайне вашего сайта. Употребив всего несколько строк CSS кода и бесплатную веб службу (или разместив ваши собственные файлы, как описано выше), вы можете создать ваш собственный набор шрифтов @font-face,совместимый с большинством известных браузеров совершенно бесплатно.

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

Источник

Popularity: 35% [?]

Теги: css