Сентябрь 29, 2005
Любой шрифт на вашем сайте. sIFR (Часть 2)
Теперь придется немного покопаться в 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 при замене текста, содержащего ссылку – пользователь не сможет выделить текст ссылки должным образом и адреса ссылок не будут отображаться в строке состояния браузера (не очень большая потеря).
Теперь необходимо вставить между <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=center&offsetTop=6"
}));
};
//]]>
</script>
sSelector должен содержать все необходимые элементы, которые будут заменяться. Пробел играет только роль разделителя одного селектора от другого. Поэтому если вы будете использовать что-нибудь типа H1.test, то никаких пробелов там находится недолжно. sFlashSrc должен содержать путь к экспортированному ранее Flash файлу. Все остальное должно быть логично.
Можно весь этот JavaScript вставить в sifr.js вместо того, чтобы делать это на каждой странице, но разработчики говорят, что так sIFR будет загружаться чуть быстрее.
Теперь загружаем на сервер все отредактированные страницы и CSS вместе с файлами .swf и sifr.js.
Я не гений в написании инструкций, поэтому если возникнут вопросы, то задавайте их в комментариях или напишите email.
Все написанное выше может создать ощущение неуверенности в стабильности работы sIFR. Это ложное ощущение. Сайты применяющие метод замены шрифтов sIFR:
ABC News
Red Hat
Six Apart
Forty Media
Aston Martin
Nike
Этот метод охватывает примерно 85-90 процентов компьютеров в мире, ну а на тех компьютерах, где отключен JavaScript или нет Flash плеера, все будет замечательно показываться в стандартном варианте. В противном случае ждите лучших времен.
Автор:
Источник: - Umade.Ru
Комментарии
- 1. 30.09.05 16:13 От: Arsart
-
Этот метод шикарен сам по своей сути. Я уже копаюсь около месяца с ним, есть ряд ограничений. В том числе если работать с нефиксированным размером шрифта. Так же есть решение для двух цветных заголовков
Здесь самое важное поверить в возможности метода и убедится самому, что это просто кусок будущего в ваших руках. - 2. 30.09.05 16:15 От: Arsart
-
http://www.maratz.com/blog/archives/2005/03/16/two-color-sifr-take-two/
Двухцветный sIFR... предупреждаю, там какой-то баг в файле dont_customize поэтому шрифт плохо парсится из флэша.