Недавно получил интересный заказ, в котором заказчик попросил использовать нестандартные шрифты. Вот начал изучать эту тематику и делюсь с вами.
Сегодня существуют 4 технологии внедрения нестандартных шрифтов в сайты.
1. «Web Embedding Fonts Tool» от дяди Гейтса. Но, как и все от микрософта, эта штуковина поддерживается в основном только ИЕ. Поэтому забываем про неё.
2. Создание картинки с нужным шрифтом. Самый действенный способ, но для этого приходится постоянно делать новые картинки, да и на лету, понятное, дело сделать такое невозможно. .
3. Технология FIR. Более улучшенная техника, чем предыдущая.
4. Технология SIFR. Самая лучшая на сегодняшний день. Суть её в том, что ява-скрипт подставляет вместо текста флеш файл, при этом замена происходит на лету. Т.е. не нужно создавать все время разные флеш-файлы, это нужно сделать всего один раз, а текст уже будет меняться автоматически. Кроме того, при отключенных ява-скриптах в браузере, будет выводится обычный текст. Но и это ещё не все достоинства.
Как известно, флеш формат не очень хорошо оптимизирован под поисковики, но в sifr все хорошо продумано, и поисковик будет видеть обычный текст в коде, при чем здесь нет всякого рода клоакингов и т.д.
Итак, поехали. Качаем сам с блога автора. Ссылка на скачку будет в самом конце страницы.
Открываем sifr.fla в редакторе от Adobe Flash желательно новых версий. Щелкаем мышкой по прямоугольнику (textbox)
Должна появиться панель свойств, там выбираем нужный шрифт и следуем дальше
Примечание. По многочисленным просьбам – добавляю пояснение к этому шагу. Итак, вы увидите картинку, такую как выше. Вам нужно навести на textbox и кликнуть по нему – он станет синего цвета.
Далее, кликаем 2 раза мышкой на пустом сером прямоугольнике в рабочей области. Появится следущее
как видите пока тут ничего редактировать нельзя. Далее, нам нужно опять навести мышкой на текст “Do not remove this text” и кликнуть 2 раза – так чтобы загорелся курсор изменения текста. Получится картинка
Вот здесь мы и можем менять шрифты и кодировки(обозначил красным)
Далее экспортируем Файл «(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.
Вот и все.
Понравилась статья? - Подпишись.
Или поделись полезным с миром
Похожие статьи:
Спасибо за полезную статью, давно искала что-то подобное.
Подскажите, пожалуйста, в чём может быть ошибка?
У меня проблема, скачал с блога архив, разархивировал, но файл sifr.fla не открывается. У меня Adobe Flash CS4 Professional. Появляется сообщение «Unexpected file format». Как быть?
Будем пробовать…
Респехт афтару…
+1
Убрать sBgColor:»#ffffff» не помогает. Подскажите пожалуйста в чем дело.
на Эмбед жал, кириллицу выделял. Еще могут быть косяки ?
Английский без проблем
Шаблон flash + XML
Оставте свой майл
Проблема в том что я ctrl не нажимал при выборе.
Вот как у меня получилось
(Шаблон flash + XML)
1. Текст в xml файле (если flas использует xml для импорта текста или картинок) должен быть сохранён в кодировке utf-8; есть очень многие редакторы для html-xml, но сохранение в utf-8 поддерживают очень не многие из них. Проще всего воспользоваться блокнотом.
Также кодировка должна быть прописана в первой строчке xml:
3. То же самое проделываем с остальными текстами.
У меня так и не получилось хорошо сделать
Сейчас опять русский пропал и пустота вместо языка. Шрифты Arial и Кириллицу везде выбрал
Благодорю вас за помошь
Как заставить это работать ? Тоесть в этом туториале написанно так какбудто все всё понимают , а я нет
Ты написал в каждую страницу вставляем жава код… куда вставляем в хеадэр или в бади? В этом жава коде я привязывю импортированный мною фонт как я понимаю. А как этот фонт привязать к элементу? Например к H1? Или к произвольному классу?
Тема староватая уже, но появился вопрос по ней… Вобщем проблем с использованием сначала не возникло, но потом заметил, что на страницах глубиной более 1 — почемуто не работает данная технология (например: — все отлично ; — не работает). Сам сайт на Drupal. Исходный код страницы смотрел — все в норме. Может быть ктонибудь сталкивался?:)