Власть народу - относительные размеры шрифтов - Вёрстка - Webmascon

WEBMASCON - журнал для веб-мастеров обновление: 2004.11.03
» Вёрстка

# Власть народу - относительные размеры шрифтов

Power To The People: Relative Font Sizes
автор: 2004.04.09 © Bojan Mihelac и A List Apart
перевод: 2004.10.18 Михаил Корнеев

Относительные размеры шрифтов делают сайты более удобными для чтения - но польза от этого не велика, если посетители сайта не знают, как реально изменять размеры текста. В 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++" в порядке возрастания.

    <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.

Bojan Mihelac

Bojan Mihelac - веб-разработчик и директор компании Informatika Mihelac в Словении. Его главная любовь - языки программирования (особенно PHP, Java, XML, and HTML), сейчас он работает над созданием программы которая облегчит создание веб-форм.

Обсудить (8)

Ссылки по теме

- Эта статья на английском языке | англ.
- Другие статьи с сайта A List Apart | англ.
- Размер шрифта пусть выбирают сами пользователи | рус.
- Размер имеет значение | рус.

« назад к списку статей

#### Указатель категорий

- Информационная архитектура (8)
- (X)HTML (13)
- Юзабилити (28)
- Якоб Нильсен (46)
- CSS (28)
- Навигация (15)
- Графика (4)
- A List Apart (16)
- Дизайн (13)
- Инструменты (9)
- Цвет (8)
- Бизнес (19)
- Менеджмент проектов (10)
- Тестирование (10)
- Программирование (9)
- Реклама и продвижение (13)
- Технологии (10)
- Проектирование (7)
- Поддержка (3)
- Текст и контент (10)
- Книги (2)
- Мысли вслух (4)
- Flash (6)

Рекомендую

Михаил Дубаков
Создание Web-страниц. Искусство верстки
Сравните цены:
на http://www.ozon.ru/context/detail/id/1590005/?partner=webmascon
на http://www.books.ru/shop/books/149089?partner=webmascon
на http://oz.by/books/more.phtml?id=109670&partner=webmascon
Почитайте Главу 7
Почитайте Главу 9

Рекомендую

Михаил Дубаков
Веб-мастеринг средствами CSS
Сравните цены:
на http://www.ozon.ru/context/detail/id/1099692/?partner=webmascon
на http://www.books.ru/shop/books/27425?partner=webmascon
на http://oz.by/books/more.phtml?id=103997&partner=mysite
Почитайте Главу 5
Отзывы о книге

что такое система Орфус?
подробнее
Удобный хостинг $6/мес.
- Поддержка PHP/Perl
- 500MB места на диске
- 15GB трафик в месяц
- Тестовые аккаунты
- Статистика
- MySQL база данных
- Панель управления
- SSH/FTP доступ
- 24x7x365 поддержка на русском
- Регистрация доменов
- Бесплатные поддомены.
- 100+ PHP скриптов
http://www.a1-hoster.com/