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

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

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

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

HTML:

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

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

CSS:

html{

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

}

body{

font-size:middle;

}

p{

font-size:70%; /* 11px */

}

p a{

font-size:100%;

}

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

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

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