Власть народу - относительные размеры шрифтов
BojanMihelac
на данный момент браузере, эта возможность спрятана в одном из меню второго уровня, из-за чего изменение размера текста становится чересчур сложной задачей для многих пользователей. Эта задача намного упростится, если на страницах сайта присутствуют кнопки, позволяющие быстро изменить размер шрифта.
К сожалению, в большинстве вариантов таких кнопок игнорируются установки пользователя. В данной статье мы приводим решение, которое позволят менять размера текста, и при этом не вступает в противоречие с настройками пользователя.
CSS
В качестве первого шага создадим CSS-файл с основными стилями, в котором будут использоваться относительные размеры шрифтов в сочетании с размером шрифта, установленном на машине пользователя по-умолчанию. Для этого размеры мы будем задавать в процентах или в em-ах.
/* размер шрифта по-умолчанию */
@importurl(small.css);
/* Совместимые с Netscape 4 размеры шрифтов */
body, div, p, th, td, li, dd {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
h1 {
font-size: 130%;
font-weight: bold;
}
h2 {
font-size: 110%;
font-weight: bold;
}
Теперь создадим пять альтернативных стилей, где используются определенные в спецификации CSS абсолютные размеры: "xx-small", "x-small", "small", "medium", и "large". В любом браузере коэффициент масштабирования между ними должен быть 1. 2, как это рекомендует стандарт CSS2. Также следует учесть и обойти проблемы масштабирования в IE5 и Opera (более подробно эта тема раскрыта в замечательной статье Тода Фарнера (ToddFahrner) "Размер имеет значение").
body,
body div,
body p,
body th,
body td,
body li,
font-size: xx-small;
"\"}\"";
font-size: x-small
}
html>body,
>body div,
>body p,
html>body th,
>body td,
>body li,
>body dd {
}
HTML
Теперь давайте создадим HTML-документ и подключим к нему основной и альтернативный CSS-файлы, присвоив альтернативным файлам имена "A--", "A-", "A", "A+" и "A++" в порядке возрастания.
<link rel="stylesheet" href="style.css"
type="text/css" />
<link rel="alternate stylesheet"
type="text/css" href="large.css" title="A++" />
<link rel="alternate stylesheet"
"text/css" href="medium.css" title="A+" />
<link rel="alternate stylesheet"
type="text/css" href="small.css" title="A" />
<link rel="alternate stylesheet"
type="text/css" href="x-small.css" title="A-" />
<link rel="alternate stylesheet"
"text/css" href="xx-small.css" title="A--" />
JavaScript
ТеперьдобавимвнашуHTML-страницупереключательтаблицстилей, взятыйизстатьи "Alternative Style: Working With Alternate Style Sheets".
<script
language="JavaScript1. 2"
src="styleswitcher.js"
type="text/javascript">
</script>
Сами кнопки реализуем вот так:
<form name="fontselect" action="GET">
<input
type="button"
onclick="javascript:fontsizedown();"
" font - "/>
<input
type="button"
onclick="javascript:fontsizeup()"
value=" font + "/>
</form>
Вот исходный код переключателя стилей, а вот полностью рабочий пример, протестированный в Mozilla 1. 6, MozillaFirebird 0. 7, Opera 7. 11, IE 6 Windows, IE 5. 2 Mac, и Safari 1. 2. Вот и все.
| 
