Способы и особенности создания страниц с изменяемым размером шрифта

В IE, при изменении состояния пункта меню «Вид → Размер шрифта» или вращении колеса мыши с зажатым Ctrl, наблюдается изменение размера текста.

Под изменяемым размером шрифта понимается указание относительного значения в параметре font-size. Относительными единицами измерения являются % и em. При этом, по сути, 1em = 100%. При принятии решения каких именно единицах измерения делать верстку надо учитывать, что при указании в em разница между размерами при разных состояниях пункта меню будет больше, чем при использовании %. По-умолчанию в IE font-size имеетзначение middle, что соответствует 16px.

Расчет производится относительно унаследованного значения:

HTML

< p> < a href=" #" > Link< /a> < /p>

CSS для изменяемого размера шрифта

html{font-size: 100.01%; /* см. ниже */}

body{font-size: middle; }

p{font-size: 70%; /* 11px */}

p a{font-size: 100%; }

Важно! Значение 100, 01% у html указывается для решения проблемы неверного вычисления размера шрифта в Opera.

В данном случае размер шрифта у тэга < a> будет примерно равен 11px (на самом деле 11, 24px, такое значение необходимо для Opera, в ней не корректно организовано вычисление дробных величин).

Порядок работы может быть разный:

· можно сначала рассчитать соответствие % или em к px, используя как базовый 16px и использовать полученные значения при дальнейшей верстке;

· можно сначала сделать верстку с использованием px, а потом пройтись по всему CSS и заменить все значения font-size с px на % или em;

· можно использовать и такой вариант:

CSS для изменяемого размера шрифта

html{font-size: 100.01%}

body{font-size: 64%; }

Важно! Во всех руководствах указывается значение 62.5% для body, но опытным путем выявлено, что вернее ставить именно 64% (большое спасибо Opera).

Важно! Следует помнить, что при использовании относительных величин свойство line-height вычисляется от величины font-size этого же блока, если не было унаследовано от родительского блока. Т.е. при font: 10px/1.2em или font: 10px/120% line-height будет равняться 12px.

Теперь 10% = 1px или 1em = 10px. Далее можно указывать размеры шрифтов, вычисляя делением указанных в дизайне на 10. Также теперь можно использовать em (но только em) для указания линейных размеров блоков, при изменении размера шрифта размер сайта будет меняться. (см. 0)

Создание страниц с использованием em для указания размеров элементов страницы

Как привести размер базового шрифта к удобному размеру описано в 0. Все тексты следует заключать в логические блоки отдельные от визуальных, чтобы не намешать кашу из наследования свойств. Далее надо заменить абсолютные значения на соответствующие относительные.