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

3865
знаков
0
таблиц
0
изображений

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++" в порядке возрастания.

<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.webmascon.com/


Информация о работе «Власть народу - относительные размеры шрифтов»
Раздел: Информатика, программирование
Количество знаков с пробелами: 3865
Количество таблиц: 0
Количество изображений: 0

Похожие работы

Скачать
22086
0
0

... ' - "декларация типа документа") сообщает валидатору, какая версия (X)HTML используется в вашей странице. Декларация должна присутствовать в начале каждой веб-страницы. Doctype - ключевой компонент страницы, претендующей на соответствие стандартам: ваша разметка и CSS не пройдут валидацию, если в вашем документе отсутствует Doctype. статья на webmascon.com Почему так важен DOCTYPE См. также: ...

Скачать
154673
0
0

... , поступившего для польских граждан. Таким образом, в ходе работы над исследованием данной проблемы были изучены документы 5 фондов Архива города Кокшетау. 2 НАСИЛЬСТВЕННОЕ ПЕРЕСЕЛЕНИЕ НАРОДОВ НА ТЕРРИТОРИЮ КАЗАХСТАНА В 1937–1956 ГОДЫ 2.1 Причины депортации, ее характер Причины осуществления депортации народов в СССР в годы массовых политических репрессий можно объяснить политическими ...

Скачать
591266
2
0

... механизм опосредованного регулирования экономики (в «классической» и «государственно-социалистической» системах он отсутствует). Три обстоятельства характерные для современной экономики распространяются и на экономику физической культуры и спорта. 1. Современная экономика является рыночной; поэтому и современную экономическую теорию в сфере физической культуры и спорта, можно определить как ...

Скачать
102033
1
1

... данных, созданы группы поиска, добавлена информация о проекте и его технической составляющей. 2.2 Перспективы атласного картографирования административных районов Калужской области Будущее атласного картирования в создании районных географических атласов как краеведческо-справочных так и научно-справочных имеет хорошие перспективы. Интересно направление в создании серии туристских карт по ...

0 комментариев


Наверх