Отборная информация, которая вставляет!

Как использовать нестандартные шрифты?

Недавно получил интересный заказ, в котором заказчик попросил использовать нестандартные шрифты. Вот начал изучать эту тематику и делюсь с вами.

Сегодня существуют 4 технологии внедрения нестандартных шрифтов в сайты.

1. «Web Embedding Fonts Tool» от дяди Гейтса. Но, как и все от микрософта, эта штуковина поддерживается в основном только ИЕ. Поэтому забываем про неё.

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

3. Технология FIR. Более улучшенная техника, чем предыдущая.

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

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

Итак, поехали. Качаем сам sifr с блога автора. Ссылка на скачку будет в самом конце страницы.

Открываем sifr.fla в редакторе от Adobe Flash желательно новых версий. Щелкаем мышкой по  прямоугольнику (textbox)

Должна появиться панель свойств, там выбираем нужный шрифт и следуем дальше

использование нестандартных шрифтов

Примечание. По многочисленным просьбам – добавляю пояснение к этому шагу. Итак, вы увидите картинку, такую как выше. Вам нужно навести на textbox и кликнуть по нему – он станет синего цвета.

wscreen_2_sifr

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

wscreen_3_sifr

как видите пока тут ничего редактировать нельзя. Далее, нам нужно опять навести мышкой на текст “Do not remove this text” и кликнуть 2 раза – так чтобы загорелся курсор изменения текста. Получится картинка

wscreen_4

Вот здесь мы и можем менять шрифты и кодировки(обозначил красным)

Далее экспортируем Файл «(File) — Экспорт (Export)» и сохраняем как имяшрифта.swf

Здесь следует добавить. Я час мучался, чтобы понять почему у меня не работают русские шрифты с sifr. Оказалось, что когда вы экспортируете файл нужно удостовериться в следующем:

Когда вы выбираете шрифт, рядом с именем шрифта нужно найти кнопочку  Embed — нажать на неё и удостовериться, что в перечисленном списке выделена закладка Cyrillic. Если не выделена, то с зажатой кнопкой ctrl выберите эту вкладку. Далее, по инструкции все остается прежним. Т.е. далее нужно экспортировать файл.

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

Далее, загружайте на сервер(т.е. в папку сайта) файлы sIFR-screen.css, sIFR-print.css, sifr.js, sifr-addons.js

Привяжите к коду страницы эти файлы. Т.е. в хедере должно быть:

  <link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print" /> 
<script src="sifr.js" type="text/javascript"></script> 
<script src="sifr-addons.js" type="text/javascript"></script> 


Теперь нужно немного поковыряться в CSS, а именно в файле sIFR-screen.css. Там вам нужно будет изменять свойства заголовков, т.е.

.sIFR-hasFlash h1{ visibility: hidden; font-size: 1.5em; } 
.sIFR-hasFlash h2 {visibility: hidden; font-size: 30px; }

Т.е. нужно обозначить размер шрифта и другие параметры выводимые при замене.

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

далее, в каждую страницу вставляем

<script type="text/javascript"> 
//<![CDATA[ 
/* Replacement calls. Please see documentation for more information. */

if(typeof sIFR == "function"){

// This is the preferred "named argument" syntax 
sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"pompadur.swf", sColor:"#000000", sLinkColor:"#000000", sBgColor:"#ffffff", sHoverColor:"#CCCCCC", nPaddingTop:0, nPaddingBottom:0, sFlashVars:"textalign=left&offsetTop=0"}));

}; 
//]]> 
</script>

Примечание: это уже измененный мною код. Просто я заметил, что когда указывается свойство nPaddingTop, nPaddingBottom отличное от 0, то немного сложно установить размеры шрифта и все коверкается. Тоже самое и при sFlashVars:»textalign=center&offsetTop=0, если в конце 0, то будет сжатие шрифта. Оригинальный код можете увидеть в дистрибутиве в файле index.

Вот и все.


 

Похожие статьи:



36 комментариев к “Как использовать нестандартные шрифты?”

  1. В CSS3 можно будет подгружать любой шрифт из онлайн-библиотеки, вроде так 🙂

  2. —Щелкаем мышкой по прямоугольнику —(textbox)

    —Должна появиться панель свойств, там —выбираем нужный шрифт и следуем дальше

    че то вообще не могу понять где это.. стоит cs3. И про кнопочку embed можно по-подробнее.. тоже найти ее не могу

  3. Игорь:

    Серега, просто нужно в рабочей площади клацнуть на прямоугольной области с крестиком.

  4. Yeva:

    Здравствуйте!
    Спасибо за полезную статью, давно искала что-то подобное.

    Переделывала несколько раз — результат один и тот же: заголовки пропадают в документе, но ничем не заменяются.
    Подскажите, пожалуйста, в чём может быть ошибка?

    • ETNO:

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

  5. _AxeL_:

    Здравствуйте!
    У меня проблема, скачал с блога архив, разархивировал, но файл sifr.fla не открывается. У меня Adobe Flash CS4 Professional. Появляется сообщение «Unexpected file format». Как быть?

    • ETNO:

      страно, так как вроде нормально все открывается. Попробуй открыть cs3, есть нормальные portable версии, ими я и открываю этот файл.

  6. Unexpected file format — та же шняга (Flash CS4)

  7. В общем, открыл файл CS3 — все ок…
    Будем пробовать…

  8. Все работает отлично…
    Респехт афтару…
    +1

    • ETNO:

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

  9. SANTA:

    Кликнул по textbox внизу появилось прямоугольное окошко с вкладками «Свойства» «Фильтры» «Параметры» Но где выбрать шрифт и где и где это «Embed» найти не могу.

    У меня cs3 professional на Русском, подскажите кто нибудь где там выбрать шрифт можно и где вкладка «Embed» вставить шрифт во флэш на сайт удалось но не тот который нужно, а который там видимо по умолчанию. Специально для этого поставил себе cs3 и уже второй день сижу над заменой шрифта.

    Подскажите кто нибудь, буду очень благодарен…

  10. SANTA:

    Спасибо большое. Всё получилось.

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

    Пробовал sBgColor задать transparent, так фон у меня от этого стал только зелёным))

    • ETNO:

      точно уже не помню — но насколько помню по тем проектам, что делал — то прозрачный фон нельзя сделать. можно только определенного цвета

  11. SANTA:

    Спасибо. Пришлось немного дизайн подкорректировать. Всё Ок

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

  13. Past:

    Извините пожалуйста, не подскажете как изменить размер шрифта в xml-ном флеш-сайте? Дело в том что есть на сайте несколько закладок(типа О фирме, Контакты и т.д.) на каждой закладке соответственно есть текст. Открыв *.fla нашел текстбоксы, в свойствах поменял шрифт, размер шрифта, поставил кириллицу и даже вбил нужный текст в *.xml. В ролике текст изменился и нормально работает. Но на паре закладок остался текст, который я никак не могу поменять, хотелось бы увеличить шрифт например. Никак не могу найти динамические текстбоксы в *.fla которые отвечают за этот текст и ничего похожего на них. Сам текст нормально меняется в *.xml, а вот где поправить его свойства я не знаю. Не подскажете где искать?

    • ETNO:

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

  14. Сергей:

    Большое спасибо все сделал по вашему примеру, помогло. Единственное что не могу убрать белый бг у элемента, сделать его прозрачным.
    Убрать sBgColor:»#ffffff» не помогает. Подскажите пожалуйста в чем дело.

    • ETNO:

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

  15. ander:

    Английский подключает, русский нив какую.
    на Эмбед жал, кириллицу выделял. Еще могут быть косяки ?

  16. ЛЕв:

    Всё сделал по инструкции РУССКИЙ ТЕКСТ ВООБЩЕ НЕ ОТОБРАЖАЕТЬСЯ
    Английский без проблем

    Может ктонибуть поможет поправить ?
    Шаблон flash + XML
    Оставте свой майл

  17. ЛЕв:

    ETNO Получилось !
    Проблема в том что я ctrl не нажимал при выборе.
    Вот как у меня получилось
    (Шаблон flash + XML)
    1. Текст в xml файле (если flas использует xml для импорта текста или картинок) должен быть сохранён в кодировке utf-8; есть очень многие редакторы для html-xml, но сохранение в utf-8 поддерживают очень не многие из них. Проще всего воспользоваться блокнотом.
    Также кодировка должна быть прописана в первой строчке xml:

    2. Открываем FLA исходник, выделяем нужный текст, в properties (свойствах) тип текста выставляем «динамический текст» (Dynamic Text), жмём курсором правее кнопочку Embed, в открывшемся контекстном меню выбираем кириллицу (Cirillic) 499символов, на клаве жмём ctrl и одновременно курсором на ok.
    3. То же самое проделываем с остальными текстами.

  18. ЛЕв:

    ETNO Не всё так просто оказалось

    Рзбираюсь с этим шаблоном
    http://fleek.org/fleekaj/WBVNEgxMS1AJTAJQDQcXUlZYS1YNGgdRBQNXVQwCGlFWB1haAFNLbCsWVg5QVwofe0xKZSxzWhdXUkoUWEMbDkQMVQ==/

    Возможно вы сможете на него сделать поддержку всех языковых групп
    У меня так и не получилось хорошо сделать
    Сейчас опять русский пропал и пустота вместо языка. Шрифты Arial и Кириллицу везде выбрал
    Благодорю вас за помошь

  19. xblain:

    Добрый день , я новичёк в этой теме и только начинаю работать с CSS ,и у меня более серьёзный вопрос 🙂
    Как заставить это работать ? Тоесть в этом туториале написанно так какбудто все всё понимают , а я нет 🙂
    Ты написал в каждую страницу вставляем жава код… куда вставляем в хеадэр или в бади? В этом жава коде я привязывю импортированный мною фонт как я понимаю. А как этот фонт привязать к элементу? Например к H1? Или к произвольному классу?

  20. jam:

    Доброе время суток!
    Тема староватая уже, но появился вопрос по ней… Вобщем проблем с использованием сначала не возникло, но потом заметил, что на страницах глубиной более 1 — почемуто не работает данная технология (например: http://fleek.org/fleekaj/WBVNEgxMS0sPTAEXExcWX1ZRAQ==/ — все отлично ; http://fleek.org/fleekaj/WBVNEgxMS0sPTAEXExcWUEtBDVENUEZKBQ==/ — не работает). Сам сайт на Drupal. Исходный код страницы смотрел — все в норме. Может быть ктонибудь сталкивался?:)

    • ETNO:

      я ставил ранее именно на внутренние страницы, значит у вас что-то не прописано в самом шаблоне друпала или же относительные пути неправильные выходят

      • jam:

        Да, оказалось, что проблема в относительных путях. Странно, что такая очевидная проблема закралась и долго не давала покоя…)) Спасибо.

оставить отзыв

Если хотите вставить код в комментарии, то оберните его тегами ‹pre›‹/pre›