Статистика
Онлайн всего: 1 Гостей: 1 Пользователей: 0
|
Статьи
Власть народу - относительные размеры шрифтов
Относительные размеры шрифтов делают сайты более удобными для чтения - но польза
от этого не велика, если посетители сайта не знают, как реально изменять размеры
текста. В Internet Explorer, наиболее распространенном на данный момент
браузере, эта возможность спрятана в одном из меню второго уровня, из-за чего
изменение размера текста становится чересчур сложной задачей для многих
пользователей. Эта задача намного упростится, если на страницах сайта
присутствуют кнопки, позволяющие быстро изменить размер шрифта.
К
сожалению, в большинстве вариантов таких кнопок игнорируются установки
пользователя. В данной статье мы приводим решение, которое позволят менять
размера текста, и при этом не вступает в противоречие с настройками
пользователя.
CSS
В качестве первого шага создадим CSS-файл с основными стилями, в
котором будут использоваться относительные размеры шрифтов в сочетании с
размером шрифта, установленном на машине пользователя по-умолчанию. Для этого
размеры мы будем задавать в процентах или в em-ах.
/* размер шрифта по-умолчанию */
@import url(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.
/* пример файла xx-small.css */
body,
body div,
body p,
body
th,
body td,
body li,
body dd {
font-size:
xx-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size:
x-small }
html>body,
html>body
div,
html>body p,
html>body th,
html>body td,
html>body
li,
html>body dd { font-size: x-small } |
|
Получившиеся файлы можно посмотреть
по данным ссылкам: xx-small.css, x-small.css, small.css, medium.css, large.css.
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" type="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" type="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="font_select" action="GET">
<input type="button"
onclick="javascript:fontsizedown();" value=" font - "/>
<input
type="button" onclick="javascript:fontsizeup()" value=" font +
"/>
</form> |
|
Вот исходный код переключателя стилей, а вот полностью рабочий пример, протестированный в Mozilla 1.6, Mozilla Firebird 0.7,
Opera 7.11, IE 6 Windows, IE 5.2 Mac, и Safari 1.2. Вот и все.
Предупреждение
Не забывайте, в некоторых версиях IE есть баг, из-за
которого он начинает странно себя вести, когда перед типом документа DOCTYPE
идет декларация XML.
Источник: http://www.internet-technologies.ru/articles/article_64.html |
| Категория: CSS | Добавил: mas (16-Сентября-2006)
|
| Просмотров: 981
| Рейтинг: 0.0/0 |
|
