Нестандартные шрифты для сайта. Использование и рецепты.

В веб-технологиях исторически сформировался список семейств шрифтов, которые принято использовать на сайтах. Стандартные шрифты:

Arial

Arial Black

Arial Narrow

Book Antiqua

Century Gothic

Comic Sans MS

Courier New

Franklin Gothic Medium

Georgia

Impact

Lucida Console

Lucida Sans Unicode

Microsoft Sans Serif

Palatino Linotype

Sylfaen

Tahoma

Times New Roman

Trebuchet MS

Verdana

Webdings

Ограничения использования обусловлены, прежде всего, не кроссплатформенностью шрифтов, вернее, политикой их распространения. Чаще всего для запоминающегося дизайна сайта web-шрифтов оказывается недостаточно. В этом случае дизайнеры используют либо ранее разработанный фирменный шрифт, либо разрабатывают шрифт сами. Для корректной и валидной верстки нестандартных для web шрифтов используют несколько методов:

Решение на базе PHP и GD

Отрисовывать шрифты и тексты средствами PHP и библиотеки GD. Откровенно не самое удачное и простое решение. Существенным минусом является тот факт, что в браузер будут передаваться картинки букв, что безусловно плохо скажется на индексации сайта.

Решение на базе css

Тупо подгрузить в css. Обычно это чревато долгой загрузкой и отработкой стилей.

Решение на базе flash

Ни для кого не секрет, что во flash можно легко использовать практически любые шрифты. Самым популярным в этой технологии решением является sifr. Принцип действия прост: 1) Обычная (X)HTML страница загружается браузером. 2) Запускается javascript функция. 3) Если Flash-плеер не установлен или если JavaScript выключен, то страница загружается естественным образом, без изменений. Если Flash-плеер установлен, то JavaScript проверяет код страницы на наличие обозначенных ранее элементов и создает подходящий по размеру Flash, который накладывается на определённые элементы. 4) Actionscript загружает нужный шрифт размером 6 pt, после чего шрифт растягивается до нужного размера.  

Нестандартный шрифт со помощью cufon

Ну и самое удачное на мой взгляд решение: использование библиотек typeface.js или cufon. Cufon более универсален, потому будем рассматривать его. Скрипт может внедрить любой шрифт на веб страницу без жесткой привязки к дизайну (т.е. тексты, заголовки, меню и т.п. можно будет изменять, не прибегая к услугам веб разработчиков). Обычный текст при загрузке страницы заменяется на SVG объект (для браузеров, поддерживающий стандарты) или на VML (для IE) — графические области, в которых символы отрисовываются с помощью javascript. Подключается cufon достаточно просто:   Преимущества
  • достаточная кроссбраузерность
  • минимум внешних файлов при любом количестве текста с нестандартным шрифтом
  • простое внедрение
  • владелец сайта спокойно может редактировать текст
  • параметры шрифта (размер, жирность, цвет) легко изменить
  • есть реакция на hover
  • возможность добавления тени у текста (text-shadow - в IE правда тень будет не совсем такая, как нужно)
  • защита используемого шрифта от копирования
  • возможность разложить шрифт на только нужные символы для уменьшения размера файла-шрифта
  • не требует дополнительных библиотек
  • небольшой вес скрипта
Недостатки:
  • наличие внешних файлов — хоть их и мало, все равно увеличат трафик, а значит страница будет открываться дольше
  • нет возможности выделить и скопировать текст (над этим работают. в IE уже можно, хоть и выглядит страшновато)
  • неприменимо к большим объемам текста
  • пока не отработает скрипт, пользователь будет видеть текст со шрифтом по умолчанию
 

Для поиска рецептов, обмена опытом или просто для общения с единомышленниками заходите на форум программистов!