опубликовано ETNO в 
Недавно получил интересный заказ, в котором заказчик попросил использовать нестандартные шрифты. Вот начал изучать эту тематику и делюсь с вами.
Сегодня существуют 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.
Вот и все.
- Как скрыть использование wordpress - ETNO - иногда да, т.е. если ваш сайт - это блог, тогда все норм, но если ваш сайт другого типа, а поисковик его будет считать блогом - это не есть хорошо... далее →
- Как скрыть использование wordpress - ридми - ну и что, что поисковик будет думать, что сайт - это блог. Это что, плохо?... далее →
- Как скрыть использование wordpress - ETNO - конечно может... далее →
- Как скрыть использование wordpress - ETNO - не скажите, тут не вопрос в том, какая cms, просто к блогам к примеру, поисковики могут относится не так. И так как wp - считается блоговым движком, т... далее →
- Как скрыть использование wordpress - ридми - не знал, что в wordpress можно столько всего менять... далее →
Похожие статьи:
- Jquery валидация форм
- Хаки для ИЕ/IE
- Фиксим проблему с png в IE
- Кастомизируемая логин панель на wordpress
- Трюки c functions.php которые вы не знали
Обязательно прочтите также и такие интерестные статьи:
В CSS3 можно будет подгружать любой шрифт из онлайн-библиотеки, вроде так
так, только css3 ещё не всеми браузерами поддерживается
–Щелкаем мышкой по прямоугольнику –(textbox)
–Должна появиться панель свойств, там –выбираем нужный шрифт и следуем дальше
че то вообще не могу понять где это.. стоит cs3. И про кнопочку embed можно по-подробнее.. тоже найти ее не могу
Серега, просто нужно в рабочей площади клацнуть на прямоугольной области с крестиком.
Здравствуйте!
Спасибо за полезную статью, давно искала что-то подобное.
Переделывала несколько раз – результат один и тот же: заголовки пропадают в документе, но ничем не заменяются.
Подскажите, пожалуйста, в чём может быть ошибка?
а попробуйте не русский текст, а английский. Если будет работать, то вы, или использовали шрифт не поддерживающий русский или же не переконвертировали шрифт для использования кирилицы
Здравствуйте!
У меня проблема, скачал с блога архив, разархивировал, но файл sifr.fla не открывается. У меня Adobe Flash CS4 Professional. Появляется сообщение “Unexpected file format”. Как быть?
страно, так как вроде нормально все открывается. Попробуй открыть cs3, есть нормальные portable версии, ими я и открываю этот файл.
Unexpected file format – та же шняга (Flash CS4)
В общем, открыл файл CS3 – все ок…
Будем пробовать…
Все работает отлично…
Респехт афтару…
+1
хм, по крайней мере, теперь знаем, что в cs4 чето не пашет, хотя логично было бы предположить, что не открывается в старых версиях, а не наоборот.
Кликнул по textbox внизу появилось прямоугольное окошко с вкладками “Свойства” “Фильтры” “Параметры” Но где выбрать шрифт и где и где это “Embed” найти не могу.
У меня cs3 professional на Русском, подскажите кто нибудь где там выбрать шрифт можно и где вкладка “Embed” вставить шрифт во флэш на сайт удалось но не тот который нужно, а который там видимо по умолчанию. Специально для этого поставил себе cs3 и уже второй день сижу над заменой шрифта.
Подскажите кто нибудь, буду очень благодарен…
специально для вас – обновил статью – там указаны картинки как сделать, чтобы менять шрифты
Спасибо большое. Всё получилось.
Если не трудно не подскажите как задний фон шрифта можно сделать прозрачным? Так как у меня на фоне стоит гардиент и фон текста немного не вписывается.
Пробовал sBgColor задать transparent, так фон у меня от этого стал только зелёным))
точно уже не помню – но насколько помню по тем проектам, что делал – то прозрачный фон нельзя сделать. можно только определенного цвета
Спасибо. Пришлось немного дизайн подкорректировать. Всё Ок
Спасибо за информацию, а то намучился с установкой русских шрифтов.Никак не хотели отображаться, даже после описанной методике. Как оказалось в шаблоне установлен sifr3, 436.Когда отредактировал все заработало.
Извините пожалуйста, не подскажете как изменить размер шрифта в xml-ном флеш-сайте? Дело в том что есть на сайте несколько закладок(типа О фирме, Контакты и т.д.) на каждой закладке соответственно есть текст. Открыв *.fla нашел текстбоксы, в свойствах поменял шрифт, размер шрифта, поставил кириллицу и даже вбил нужный текст в *.xml. В ролике текст изменился и нормально работает. Но на паре закладок остался текст, который я никак не могу поменять, хотелось бы увеличить шрифт например. Никак не могу найти динамические текстбоксы в *.fla которые отвечают за этот текст и ничего похожего на них. Сам текст нормально меняется в *.xml, а вот где поправить его свойства я не знаю. Не подскажете где искать?
обычно, все таки в fla файле. попробуйте так – скопируйте этот файлик куда нибудь, откройте копию – посмотрите таймлайн и попробуйте вырубать по очереди каждый слой на таймлайне – методом перебора, найдете тот, который отвечает за ваш текст. Вот его потом и редактируйте
Большое спасибо все сделал по вашему примеру, помогло. Единственное что не могу убрать белый бг у элемента, сделать его прозрачным.
Убрать sBgColor:”#ffffff” не помогает. Подскажите пожалуйста в чем дело.
посмотрите также в файлах стилей, там тоже могжет быть прописан бекграунд, причем насколько помню в 2 классах. если и это не поможет, то нужно также сохранить флеш файл с вашим бекграундом
нашел. надо всего лишь дописать sWmode:”transparent”.
Английский подключает, русский нив какую.
на Эмбед жал, кириллицу выделял. Еще могут быть косяки ?
ага, например, сам шрифт может не поддерживать кириллицу
Всё сделал по инструкции РУССКИЙ ТЕКСТ ВООБЩЕ НЕ ОТОБРАЖАЕТЬСЯ
Английский без проблем
Может ктонибуть поможет поправить ?
Шаблон flash + XML
Оставте свой майл
а вы уверены, что ваш шрифт вообще поддерживает кириллицу?
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. То же самое проделываем с остальными текстами.
спасибо и вам, возможно кому-то поможет ещё ваши советы
ETNO Не всё так просто оказалось
Рзбираюсь с этим шаблоном
Возможно вы сможете на него сделать поддержку всех языковых групп
У меня так и не получилось хорошо сделать
Сейчас опять русский пропал и пустота вместо языка. Шрифты Arial и Кириллицу везде выбрал
Благодорю вас за помошь
у вас шаблон с темплейтмонстров, там шрифты не поддерживают кириллицу, сделать никак нельзя будет, только разве что подобрать похожий, но кириллический. Возможно также вместо sifr вам подойдет лучше техника cufon –
Добрый день , я новичёк в этой теме и только начинаю работать с CSS ,и у меня более серьёзный вопрос
Как заставить это работать ? Тоесть в этом туториале написанно так какбудто все всё понимают , а я нет
Ты написал в каждую страницу вставляем жава код… куда вставляем в хеадэр или в бади? В этом жава коде я привязывю импортированный мною фонт как я понимаю. А как этот фонт привязать к элементу? Например к H1? Или к произвольному классу?
– вот пример привязки, так как страничка там очень простая, то легко увидите в исходном коде что и как подключено