Первый пост и сразу по делу. Начнем же…
Довелось как то раз использовать sIFR. Если кто не знает, это такая штука. которая дает возможность использовать на веб странице абсолютно любой шрифт и это кроссбраузерно! Невероятно, но факт:-) Естественно это требует своих жертв, как минимум, у конечного пользователя должен стоять Flash, в общем написано довольно много о всех приимуществах и недостатка, я же остановлюсь на применении.
Шаг первый
Выбираем необходимый шрифт и качаем архив sIFR. Я использовал sIFR3-r436.
Шаг второй
Я упускаю момент выбора шрифта, в моем случае он был предоставлен дизайнером.
Шаг третий
Открываем скачанный архив:
Отсюда нам необходим в первую очередь файл sifr.fla.
1. Открываем его в Adobe Flash (я использовал Adobe Flash Professional CS5).
2. Кликаем два раза по белому прямоугольнику в центре и должны получить такую картинку:
3. Берем инструмент редактирования текста:
4. Пишем любую надпись, можно даже один символ, я написал название шрифта, который мне необходим:
5. Устанавливаем нужный нам шрифт:
6. Удостоверимся что не подключены лишние шрифты:
7. Вот собственно и все, осталось экспортировать наш проект в swf:
Открываем настройки публикации File -> Publish Settings… (Ctrl+Shift+F12):
Настраиваем как на картинке и жмем Publish и открываем папку где лежит наш sifr.fla, там будет лежать нужный нам sifr.swf
Шаг четвертый
Подключаем созданный нами файл к нужной странице:
Естественно разместив по указанным путям указынные файлы.
Дальше открываем sifr-config.js и правим (точнее трем все и вставляем по примеру):
Давай те разберем это чуть более подробно, первое, по поводу чего у меня возникли проблемы, решилось так:
wmode: 'transparent' — используется для того что бы фон у замененного елемента был прозрачный
tuneHeight: -6 — уменьшаем высоту замененного елемента ( или увеличиваем, если без минуса:-) )
Перечень остальных параметров находится тут. Настройки стилизации (css) тут.
Примечание: если был выбран шрифт с разными настройками стиля (жирный, курсив), то указать явно, какой необходимо использовать, можно прописав это примерно так
P.S. Я не претендую на оригинальность статьи, описал то с чем пришлось столкнуться, полное руководство ищите на http://wiki.novemberborn.net/sifr3/.
Довелось как то раз использовать sIFR. Если кто не знает, это такая штука. которая дает возможность использовать на веб странице абсолютно любой шрифт и это кроссбраузерно! Невероятно, но факт:-) Естественно это требует своих жертв, как минимум, у конечного пользователя должен стоять Flash, в общем написано довольно много о всех приимуществах и недостатка, я же остановлюсь на применении.
Шаг первый
Выбираем необходимый шрифт и качаем архив sIFR. Я использовал sIFR3-r436.
Шаг второй
Я упускаю момент выбора шрифта, в моем случае он был предоставлен дизайнером.
Шаг третий
Открываем скачанный архив:
- css
— sifr.css - demo
— all.css
— index.html
— cochin.swf
— rockwell.swf
— index.xhtml - flash
— Options.as
— sIFR.as
— SifrStyleSheet.as
— sifr.fla - js
— source
— sifr.js
— sifr.js
— sifr-config.js
— sifr-debug.js - changelog.txt
Отсюда нам необходим в первую очередь файл sifr.fla.
1. Открываем его в Adobe Flash (я использовал Adobe Flash Professional CS5).
2. Кликаем два раза по белому прямоугольнику в центре и должны получить такую картинку:
3. Берем инструмент редактирования текста:
4. Пишем любую надпись, можно даже один символ, я написал название шрифта, который мне необходим:
5. Устанавливаем нужный нам шрифт:
6. Удостоверимся что не подключены лишние шрифты:
7. Вот собственно и все, осталось экспортировать наш проект в swf:
Открываем настройки публикации File -> Publish Settings… (Ctrl+Shift+F12):
Настраиваем как на картинке и жмем Publish и открываем папку где лежит наш sifr.fla, там будет лежать нужный нам sifr.swfШаг четвертый
Подключаем созданный нами файл к нужной странице:
<link rel="stylesheet" href="css/sifr.css" type="text/css">
<script src="js/sifr.js" type="text/javascript"></script>
<script src="js/sifr-config.js" type="text/javascript"></script>Естественно разместив по указанным путям указынные файлы.
Дальше открываем sifr-config.js и правим (точнее трем все и вставляем по примеру):
var ZettaSerif = {
src: 'flash/sifr.swf'
}; sIFR.activate(ZettaSerif); sIFR.replace(ZettaSerif, {
selector: 'h1'
,css: ['.sIFR-root { font-size:32px }']
,wmode: 'transparent'
});
sIFR.replace(ZettaSerif, {
selector: 'h2'
,tuneHeight: -6
,css: [ '.sIFR-root { font-size:16px; }']
,wmode: 'transparent'
});Давай те разберем это чуть более подробно, первое, по поводу чего у меня возникли проблемы, решилось так:
wmode: 'transparent' — используется для того что бы фон у замененного елемента был прозрачный
tuneHeight: -6 — уменьшаем высоту замененного елемента ( или увеличиваем, если без минуса:-) )
Перечень остальных параметров находится тут. Настройки стилизации (css) тут.
Примечание: если был выбран шрифт с разными настройками стиля (жирный, курсив), то указать явно, какой необходимо использовать, можно прописав это примерно так
...
,css: ['.sIFR-root { font-size:32px; font-weight:bold; }']
...P.S. Я не претендую на оригинальность статьи, описал то с чем пришлось столкнуться, полное руководство ищите на http://wiki.novemberborn.net/sifr3/.