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

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

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

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

Особенности табличной верстки

При табличной верстке надо обнулить padding и margin, как у самой таблицы так и у вложенных td. Также надо избавиться от граничных отступов: border-collapse:collapse.

HTML таблиц

<table class="table">

<tr>

<td>Cell1</td>

<td>Cell1</td>

</tr>

</table>

CSS таблиц

table.table{

padding:0;

margin:0;

border-collapse:collapse;

}

table.table td{

padding:0;

margin:0;

}

Таким образом, мы избавляемся от записи параметров тэга <table>.

Следует избегать использования rowspan: в некоторых браузерах rowspan не всегда корректно обрабатывается.

Элементам tr и td не следует присваисать свойства position:absolute и float, так как это может привести к совершенно разным результатам в разных браузерах (рекомендуется с этим поэкспериментировать, чтобы иметь представление о предмете). Так же надо учитывать, что на блоки имеющие свойства display:table, display:table-row, display:table-cell накладываются те же ограничения.