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

В 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. Все тексты следует заключать в логические блоки отдельные от визуальных, чтобы не намешать кашу из наследования свойств. Далее надо заменить абсолютные значения на соответствующие относительные.








Дата добавления: 2015-07-07; просмотров: 597;


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию.

Поделитесь с друзьями:

Если вам перенёс пользу информационный материал, или помог в учебе – поделитесь этим сайтом с друзьями и знакомыми.
helpiks.org - Хелпикс.Орг - 2014-2024 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.003 сек.