![]() Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Способы и особенности создания страниц с изменяемым размером шрифта
В 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. Все тексты следует заключать в логические блоки отдельные от визуальных, чтобы не намешать кашу из наследования свойств. Далее надо заменить абсолютные значения на соответствующие относительные.
|