Xiper

Нестандарный шрифт. Быть ему или нет?

Автор: Евгений Рыжков Дата публикации:

пример нестандартного шрифтаОдно из проявлений чувства прекрасного у дизайнеров — это применить на сайте какой-то необычный шрифт. И пусть он почти нечитабелен и до лампочки, что не относится к безопасным. Зато у него плавные линии и есть завитушки, и похож на почерк Пушкина. В общем, хотят такой, хоть ты тресни.

Проблема

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

А теперь представь, что верстаешь сайт, у которого в месяц будет 100 000 уникальных посетителей. Какая вероятность того, что у всех или хотя бы у большинства из них будет установлен нужный шрифт? Почему-то мне кажется, что она будет равна или почти равна нулю. Это главное отличие от безопасных шрифтов, которые присутствуют у подавляющего большинства пользователей веб.

Решение 1 — образумить дизайнера, заказчика, руководителя проекта

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

Решение 2 — использование картинок

Быдлометод. Текст вставляем картинками. До недавнего времени — это был в принципе единственный способ, не считая flash.

Твои аргументы против:

  • отсутствие гибкости — владелец сайта будет практически лишен возможности самостоятельно изменять и добавлять надписи сделанные с помощью картинок. Чтобы внести изменения нужны как минимум навыки работы с photoshop ("нарисовать" новую надпись, вырезать ее), а зачастую еще и навыки верстальщика, чтобы править стили;
  • слабое СЕО — поисковики плохо умеют читать картинки (применимо к заказчику, который свято верит, что СЕО методы завтра ему приведут миллион посетителей...а может даже два);
  • черепашья скорость загрузки — современный сайт и так насыщен графикой. Давай еще и текст сделаем картинками, чтобы пользователь наверняка не дождался загрузки страницы;
  • нагрузка на сервер — каждая отдельная картинка — это дополнительный напряг для сервера. Поверь, он и так без дела не простаивает (актуально для высоконагрузочных проектов);
  • деньги за трафик — больше картинок, больше трафик, больше за него платить (актуально для умеющих считать деньги владельцев сайтов или просто скупердяев);
  • неудобство пользователю — нельзя выделить и скопировать текст, который сделан картинкой.

Заметка

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

Решение 3 — sIFR

Во время загрузки страницы обычный текст подменяется на flash-объект.

Аргументы за:

  • получаем нужный результат кроссбраузерно
  • владелец сайта спокойно может редактировать текст
  • текст выделяется и копируется
  • хорошая СЕО

Твои аргументы против:

  • требуется наличие включенного js и установленного flash
  • требуются навыки подготовки такого шрифта для сайта (работа с какими-то флеш-программами)
  • параметры текста (вроде цвета, размера, жирности) так просто не изменить
  • дополнительные внешние файлы, что не лучшим образом скажется на скорости загрузки
  • много флеша на странице тоже не лучшим образом скажется на скорости работы сайта

По причине моей неприязни к flash в детали этого плагина не вникал и расписывать тут не буду. Подробности на сайте разработчика.

Решение 4 — js-плагин Cufon

Во время загрузки страницы обычный текст заменяется SVG (для поддерживающих стандарты браузеров) или VML (для IE) объектом. В этих графических объектах буквы отрисовываются графически с помощью javascript.

Аргументы за:

  • получаем нужный результат кроссбраузерно
  • минимум внешних файлов при любом количестве текста с нестандартным шрифтом
  • просто внедрять
  • владелец сайта спокойно может редактировать текст
  • параметры шрифта (размер, жирность, цвет) легко изменить
  • есть реакция на hover
  • возможность добавления тени тексту (text-shadow. В IE правда тень будет не совсем такая как нужно)
  • защита используемого шрифта от копирования
  • возможность разложить шрифт на только нужные символы для уменьшения размера файла-шрифта

Твои аргументы против:

  • наличие внешних файлов — хоть их и мало, все равно увеличат трафик, а значит, сайт будет открываться дольше
  • нет возможности выделить и скопировать текст (над этим работают)
  • реально неприменимо к большим объемам текста
  • пока не отработает скрипт, пользователь будет видеть текст шрифтом по умолчанию

Познакомиться детальней с практическим применением Cufon.

Решение 5 — @font-face

@font-face — это такое CSS правило, которое позволяет импортировать внешний файл шрифтов в документ. Это значит, что если у пользователя не установлен нужный шрифт, он подгрузится с сервера без установки в операционную систему. Тебе всего лишь нужно добавить пару правил в CSS. То чего и ждали многие годы! Ура!

Познакомиться детальней с практическим применением @font-face.

Аргументы за:

  • гибкость — владелец сайта может как угодно менять любые тексты;
  • текст ведет себя как текст (ведь он же остается текстом), т.е. выделяется, реагирует на изменения цвета, жирности, начертания и т.п., идеальное СЕО

Твои аргументы против:

  • не всеми браузерами поддерживается: понимают IE 4+, Opera 10.5+, Firefox 3.5+, Chrome 2+, Safari 1+
  • большой вес шрифта — может достигать нескольких мегабайт (нужно с умом подбирать шрифт для сайта)
  • пока подгружается шрифт, пользователь в одних браузеров (IE, Firefox, Opera) видит отображение текста обычным шрифтом, в других браузерах — вообще не видит текст (Safari, Chrome)
  • дорогой шрифт могут стырить, а за это владельца сайта пригласить в суд. Твой долг предостеречь о возможных последствиях.
  • могут проскакивать мелкие баги при ховере — не перекрашиваться полностью текст (Safari, Chrome, Opera) баг при ховере на нестандартном шрифте
  • большая трудоемкость (надо оптимизировать шрифт, переконвертировать в EOT) — дольше делать, дороже стоит работа

Решение 5 — динамическая подмена с помощью PHP

На мой взгляд нереальное извращение. Кому охота расширить свой кругозор, а может даже попробовать метод в деле, идем сюда — List Apart :: Dynamic Text Replacement.

Главный вопрос — так можно ли сейчас внедрять нестандартные шрифты?

Можно. Только осторожно. Мой выбор в сторону симбиоза методов:

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

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

Может пригодиться

  • webfonts.info — проект посвященный веб шрифтам
  • Google font directory