Власть народу - относительные размеры шрифтов
    Bojan Mihelac
    Относительные размеры шрифтов делают сайты более удобными для чтения - но польза от этого не велика, если посетители сайта не знают, как реально изменять размеры текста. В 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 (более подробно эта тема раскрыта в замечательной статье Тода Фарнера (Todd Fahrner) "Размер имеет значение").
    /* пример файла 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++" в порядке возрастания.
    
    
    
    
    
    
    JavaScript
    Теперь добавим в нашу HTML-страницу переключатель таблиц стилей, взятый из статьи "Alternative Style: Working With Alternate Style Sheets".
    
    
    Сами кнопки реализуем вот так:
    
    
    
    
    Вот исходный код переключателя стилей, а вот полностью рабочий пример, протестированный в Mozilla 1.6, Mozilla Firebird 0.7, Opera 7.11, IE 6 Windows, IE 5.2 Mac, и Safari 1.2. ............