Любой шрифт на вашем сайте. sIFR

Внедрение шрифтов — EOT и @font-face.

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

Вот они, красавцы: Arial, Georgia, Helvetica, Times New Roman, Trebuchet, Palatino, Verdana и несколько других, менее распространённых шрифтов.

Более подробно о шрифтах для веба я напишу в другой раз, ну а на данный момент есть более интересная и увлекательная тема — возможность использовать любой шрифт на веб-странице. Хоть это заявление звучит несколько громче, чем есть на самом деле, но тем не менее является самым громким заявлением на сегодняшний день. Речь идёт о sIFR (Scalable Inman Flash Replacement) или МЗФИ 🙂 — Масштабируемая Замена Флэшом Инмэна. Недавно разработка этого метода замены шрифтов достигла весьма приличного уровня и заслуживает внимания.

Принцип достаточно прост — HTML-элементы заменяются Flash’ом, содержащим в себе необходимый шрифт.

1. Обычная веб-страница загружается в браузер
2. JavaScript-функция сначала проверяет наличие Flash-плеера, и затем ищет указанные тэги или классы.
3. Если Flash-плеер не установлен или если JavaScript выключен, то страница загружается естественным образом, без изменений. Если Flash-плеер установлен, то JavaScript проверяет код страницы на наличие обозначенных ранее элементов и создает подходящий по размеру Flash, который накладывается на определённые элементы.
4. Actionscript загружает нужный шрифт размером 6pt, после чего шрифт растягивается до нужного размера.

sIFR должен применяться только к заголовкам или к небольшому количеству текста. Меня, как и многих других, это более чем устраивает. За параграфы я не волнуюсь (мне хватит перечисленных в начале статьи шрифтов), но заголовки — это святое дело. Кстати о заголовках. Для тех, кто беспокоится за поисковые системы, а точнее за содержимое заголовков и за индексацию страниц, скажу, что беспокоится нет смысла. Текст заголовков всегда остаётся на своем месте. На всякие там рейтинги sIFR никак не влияет.

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

Качаем sIFR и распаковываем его содержимое. Чтобы создать Flash-файл с нужным шрифтом открываем sifr.fla в редакторе от Macromedia и делаем двойной щелчок мыши по невидимому прямоугольнику (textbox). Если панель “Свойства (Properties)” не открыта, то выбираем “Окно (Window) > Свойства” и уже там выбираем нужный шрифт. Теперь экспортируем Файл “(File) > Экспорт (Export)” и сохраняем под названием имяшрифта.swf

Файлы customize_me.as и dont_customize_me.as должны быть в одной директории с sifr.flа и используются только для экспорта Flash-файла, т.е. их не нужно загружать на сервер.

Теперь придётся немного покопаться в CSS. Все содержимое из sIFR-screen.css нужно переместить в свой CSS-файл. Редактировать нужно только span.sIFR-alternate и всё, что начинается с .sIFR-hasFlash. Например, если нужно заменить заголовок H1, то пишем следующее:

.sIFR-hasFlash h1 {
visibility: hidden;
/* необходимые свойства идут сюда */
}

Здесь необходимо использовать font-size, font-height, letter-spacing, height — главные свойства в настройке. Если появятся искажения шрифта, то, скорее всего, нужно поиграть с этими настройками. Желательно, чтобы всё обозначалось в пикселях, особенно, если используются относительные размеры шрифтов, отступов и т.д. Оригинальные CSS-свойства H1 остаются неизменными.

Для Firefox есть плагин под названием FlashBlock и специально для тех, у кого стоит этот плагин, необходимо настраивать span.sIFR-alternate для альтернативы. Не забудьте про sIFR-print.css, т.к. все содержащиеся там свойства нужно применить к CSS-файлу для печати и, соответственно, отредактировать под свои нужды. Также стоит помнить о недостатке sIFR при замене текста c ссылкой — пользователь не сможет выделить текст ссылки должным образом и адреса ссылок не будут отображаться в строке состояния браузера (не очень большая потеря).

Теперь необходимо вставить между <head></head> каждой страницы скрипт sifr.js следующим образом:

<script src="sifr.js" type="text/javascript"></script>

Далее вставляем в каждую страницу необходимый JavaScript:

<script type="text/javascript">

//<![CDATA[

if(typeof sIFR == "function"){

sIFR.replaceElement(named({
nWidth:50,
nHeight:40,
sSelector:"body h1",
sFlashSrc:"имяшрифта.swf",
sColor:"#000000",
sLinkColor:"#000000",
sBgColor:"#FFFFFF",
sHoverColor:"#CCCCCC",
nPaddingTop:20,
nPaddingBottom:20,
sFlashVars:"textalignОnter&offsetTop=6"
}));

};
//]]>

</script>

sSelector должен содержать все необходимые элементы, которые будут заменяться. Пробел играет только роль разделителя одного селектора от другого. Поэтому если вы будете использовать что-нибудь типа H1.test, то никаких пробелов там находится не должно. sFlashSrc должен содержать путь к экспортированному ранее Flash-файлу. Всё остальное должно быть логично.

Можно весь этот JavaScript вставить в sifr.js вместо того, чтобы делать это на каждой странице, но разработчики говорят, что первое позволяет загружать sIFR чуть быстрее.

Теперь загружаем на сервер все отредактированные страницы и CSS вместе с файлами .swf и sifr.js.

Я не гений в написании инструкций, поэтому если возникнут вопросы, то задавайте их в комментариях или напишите email.

Всё написанное выше может создать ощущение неуверенности в стабильности работы sIFR. Это ложное ощущение. Сайты применяющие метод замены шрифтов sIFR:

• ABC News
• Red Hat
• Six Apart
• Forty Media
• Aston Martin
• Nike

Этот метод охватывает примерно 85-90% компьютеров в мире, ну а на тех компьютерах, где отключен JavaScript или нет Flash-плеера, всё будет замечательно показываться в стандартном варианте. В противном случае ждите лучших времён.

По теме: PHP+CSS: Динамичекая замена текста