LOADING

Нестандартные шрифты в Web.

  1. Главная страница
  2. Блог
  3. Заметки и статьи
  4. Нестандартные шрифты в Web.

Нестандартные шрифты в Web.

В процессе разработки сайтов я не раз сталкивался с такой проблемой: интересный и красивый шрифт не так уж и просто перенести из psd макета в html страницу. Список шрифтов, отображающихся на абсолютном большинстве устройств невелик, по сути, это около 5-10 наименований, при этом они довольно схожи между собой. Приходится выбирать между рубленными Arial, Helvetica, Tahoma, Verdana, Geneva, а также Times New Roman, Times, Georgia, Palatino с засечками, моноширинными Courier + Courier New и пресловутым Comic Sans, который в здравом рассудке уж точно не выберешь;)

При этом далеко не все веб-дизайнеры учитывают эти реалии, и часто вставляют в макет шрифты далёкие от стандартных, отсюда возникает задача – как реализовать код и вёрстку так, чтобы нужный шрифт отображался на максимальном количестве устройств и браузеров? Есть несколько решений этой задачи:

Изображение вместо текста

Если на всём сайте нестандартный шрифт используется 1-2 раза в небольших блоках, то наиболее очевидное решение – скопировать изображение из графического редактора и включить его в вёрстку. Недостатки такого решения очевидны – текст на изображении не будет индексироваться поисковиками, хотя это можно частично решить, вставив данный текст в атрибут alt тега img.

Также графический файл будет больше «весить», что увеличит время загрузки сайта. Эту проблему можно свести к минимуму, сохранив изображение в формате gif, грамотно подобрав параметры сохранения, чтобы изображение занимало минимальный объём при максимальном качестве.

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

В целом – такой подход хорош, если надпись одна, макимум две, и вы точно знаете, что менять её не придётся, в крайнем случае менять надо будет не слишком часто.

Подключение файла шрифта через CSS

Довольно распространённый способ, однако же далеко не самый правильный и удобный. Способ заключается в прописывании в css файле, присоединённом к html странице свойства @ font-face:

@font-face {
font-family : 'Font-Name';
src : url('font.eot');
src : local('Font-Name'), url('font.ttf') format('truetype');
}

Где ‘Font-Name‘ – выбранное название для шрифта, а ‘font.eot‘ и ‘font.ttf‘ – файлы шрифта в двух форматах(необходимо для отображения шрифта в Internet Explorer, в котором выводится только .eot формат.) В дальнейшем для элементов, которые необходимо отобразить этим шрифтом прописывается параметр font-family : ‘Font-Name’;.

Основным недостатком этого способа является то, что не все браузеры могут отображать шрифты из файлов, некоторым нужен особый формат(.eot для IE), некоторые блокируют подгрузку шрифта. Существуют группа онлайн конвертеров, где можно получить из обычного ttf файла несколько вариантов шрифта в различных форматах и код вставки шрифта для CSS(например http://www.fontsquirrel.com/fontface/generator). Но даже использование подобных инструментов не даёт гарантии того, что шрифт будет 100% корректно отображаться на большинстве устройств, при этом объём сайта, а соответственно и время загрузки, будет увеличено за счёт подгрузки файлов шрифтов.

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

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

Вывод шрифта с помощью JavaScript средств

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

Столкнувшись с использованием этой библиотеки в Вордпрессе я был приятно удивлён кроссбраузерностью и универсальностью решения.

Библиотека проста в подключении и использовании – достаточно скачать библиотеку cufon по адресу http://cufon.shoqolate.com/js/cufon-yui.js , создать файл JavaScript нужного вам шрифта с помощью этого генератора — http://cufon.shoqolate.com/generate/ , переписать эти оба файла в ту же директорию на сервере, где хранится ваш сайт прописать внутри блока главной страницы сайта следующие теги:


<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="FontName.js"></script>
<script type="text/javascript">
Cufon.replace("h1", "#capture", ".container",);
</script>

Где FontName.js – файл, который вы получили с помощью генератора, а h1, #capture, .container – css идентификаторы тегов, содержимое которых будет отображено вашим шрифтом – т.е. все заголовки h1, а также текст внутри тегов с id=”capture” или class=”container”.

Также, в тех случаях, когда сайт использует CMS, в которой уже установлена библиотека Cufon, нередки случаи, когда не отображаются заголовки кириллицей. Причина этого в том, что в файл, полученный с помощью генератора не включены кириллицеские символы. Для того, чтобы это исправить следует сгенерировать файл заново, при этом указав в разделе Include the following glyphs(if aviable) опции Cyrillic Alphabet и Russian Alphabet и заменить этим файлом файл шрифта на сервере.

Вывод шрифта PHP средствами

Также нестандартные шрифты можно вывести средствами GD библиотеки PHP. Этот способ сложно назвать простым решением – по сути библиотека генерирует отдельное изображение, на основе переданного функции текста + в самой библиотеке всего пять встроенных шрифтов, для того, чтобы подключить свой шрифт придётся сгенерировать специальный файл, подключить его к функции и прописать функцию для вывода текста. При всех этих неудобствах метод обладает стандартными недостатками – нагружает сайт и увеличивает время загрузки.

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

Статья подготовлена web-разработчиками Студии «Code201»

Leave a comments