Библиотека Интернет Индустрии I2R.ru

Июль 14, 2005

Автор: Никита Вакорин
Источник: Umade.Ru

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

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

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

Принцип достаточно прост – JavaScript заменяет нужные (X)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 при замене текста, содержащего ссылку – пользователь не сможет выделить текст ссылки должным образом и адреса ссылок не будут отображаться в строке состояния браузера (не очень большая потеря).

Теперь необходимо вставить между <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=center&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 плеера, все будет замечательно показываться в стандартном варианте. В противном случае ждите лучших времен.

Статьи по теме:

• АJAX. Не повторяйте ошибок
• Web-приложения - поступь будущего
• Необходимость разработки стандартов web-дизайна
• Проверочный список для веб-стандартов
• Анализ популярных решений в web-дизайне.
• Роль стандартов de facto в Web-е
• Консорциум W3C