umade.ru

Любой шрифт на вашем сайте. 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:

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

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

Всего оставлено 24 комментария

  1. YouS 15 июля 2005

    Ну незнаю… пока мне хватает Arial, Tahoma, Times New Roman, Verdana… зачем мудрить… эти шрифты самые грамотные в своём исполнении..

    Если конечно не устраивать ЦИРК на сайте… :)

  2. copyhold 28 июля 2005

    я так понимаю шрифт грузить все равно надо
    тогда на кой это надо если есть “font embedding” от микрософта. он то работает везде , а не только в “определенных” тегах

  3. Никита 28 июля 2005

    В том то и дело, что font embedding работает не на всех машинах. Один и тотже шрифт может вести себя по-разному на различных системах. Netscape не поддерживает font embedding начиная с 6 версии.

    Единственный вариант с данным методом – OpenType, да и то, надо быть уверенным, что у пользователя стоит IE4 и выше.

    sIFR признан не самым идеальным, но самым лучшим вариантом для заголовков на сегодняшний день.

  4. jno 1 августа 2005

    почему, собственно, только заголовков?
    а те же формулы втыкать?

  5. amix 20 сентября 2005

    о боги.
    может быть, проще показать картинку тем, у кого images=on, и текст тем, у кого они off?
    мне нравятся эксперименты, но, но не извращение ли это?

  6. Максим Россомахин 22 сентября 2005

    Как подключить к одному заголовку два различных шрифта? Т.е. что-то типа

    [h1][span]Тонкий[/span] Жиртрест[/h1]

    где текст внутри спана набран шрифтом с довольно тонким начертанием, а основной текст заголовка — более “жирным” шрифтом.

  7. Никита 23 сентября 2005

    Думаю, что 2 шрифта в одном заголовке не поддерживается sIFR.

    По крайней мере пробовал sSelector:”body h1.span и пробовал старым синтаксисом “h1.span”, “font.swf”,…

  8. Максим Россомахин 24 сентября 2005

    Жаль. Не мне, правда,— а тем клятым дизайнерам, что имели дурость замыслить такое ;) Спасибо за помощь.

  9. Никита 19 января 2006

    Multi color sIFR – несколько цветов в одном заголовке.

  10. Николай 4 сентября 2006

    Люди, может кто знает как сделать заголовки на sIFR ЗАГЛАВНЫМИ буквами? text-transform: uppercase; не помогает, уже весь инет перерыл, ничего не нашел.

  11. Никита 4 сентября 2006

    Николай, начиная с sIFR версии 2, работает опция “uppercase=true”

  12. Николай 20 сентября 2006

    Простите, а где эту функцию вставлять? а то я дизайнер, не программист. Попытался вставить в setsifr.js, делает заглавными, но сглаживание исчезает.

  13. Геннадий 29 января 2007

    Все Это очень здорово однако у меня не работает метод sIFR с русскими буквами!!!

    И Важно ли в каком flashe делать экспорт, в 7 или 8

  14. Lass 24 февраля 2007

    Полезный материал
    Вариации со шрифтами – очень ценная вещь
    иногда ими даже выгоднее варьировать, заменяя рисунки…

  15. Christina 30 марта 2007

    зравствуйте! я савсем не поняла что к чему. У меня есть .swf файл меню. В нем я использовала шрифт Space Age. как все таки заставить браузер ВИДЕЬ его! не заменять стандартным! я делаю как вы говорите. это работает с Sifr.fla но с моим нет. что я делаю не так?

  16. Рустам 11 апреля 2007

    А эта штука с кириллицей работает?

  17. Никита 7 мая 2007

    Рустам, читайте заголовок ;)

  18. meL 21 мая 2007

    Очень полезная информация.

  19. Oxana 11 октября 2007

    А всетаки куда вставлять uppercase=true для сифров.. ато у меня оно чтото не работает :-(
    плиизз!!! очень надо

  20. Никита 2 марта 2008

    Ни один из сайтов, перечисленных в списке, не использует sIFR.

  21. iMan 2 марта 2008

    JavaScript и Flash конечно красиво, но это очень стремная комбинация, мало того, что Flash требует плагина так и JavaScript еще у многих отключен

  22. SiteDiz 20 мая 2008

    БОМБА. то что надо. правда с флешом не сильно хочеться копаться. може кто знает более простые способы ?

  23. Алексей 27 июля 2008

    Мало в сети инфы, я вот немогу понять как применить фильтр к sIFR, у меня есть такая конструкция

    ,filters: { DropShadow: { knockout: false ,distance: 0 ,color: “#FF0000″ ,strength: 1 }}

    но она не в какую не хочет работать в 2.05, подлядел ее на Designcollector, неподскажите в чем проблема?

  24. Алексей 1 октября 2008

    Если есть проблемы с отображением кириллицы, то инструкция такая:

    Создайте в своей рабочей директории папку для работы с флэш файлами. Скопируйте туда файлы dont_customize_me.as; customize_me.as; sifr .fla
    Откройте FLA файл в соответствующей программе (Flash не меньше 6 версии)
    Дважды щелкните по белому полю, появится надпись «Don’t remove this text», активируйте надпись одним нажатием того же инструмента Selection tool.
    В открывшейся панели Properties выберите требуемый шрифт (на картинке он должен смениться) и нажмите кнопку Embed (в старых версиях Character)
    В окошке символов выберите с зажатой кнопкой Ctrl группы: Uppercase, Lowercase, Numerals, Basic Latin, Latin I и, по возможности Cyrillic. Нажмите OK.
    Экспортируйте swf-movie: File->Export->Export Movie

    далее как написано выше…

Поиск по сайту

Из последнего

Архив статей и записей