22 August 2008

fonts size - using of EM tag

There are two types of length units: relative and absolute. Relative length units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer). - W3C Relative units are:

* em: the 'font-size' of the relevant font
* ex: the 'x-height' of the relevant font
* px: pixels, relative to the viewing device

The .em unit can be troublesome, though theoretically it is ideal. Read the following from the W3C specs and note the potential pitfalls: The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)


The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)


»em« nicht nur für Schriftgrößen!

Wie man sieht, muß bei verschachtelten Elementen die Abhängigkeit von den Schriftgrößen der Elternelemente beachtet werden. Darüber hinaus kann ein Bug bei manchen Installationen des Internet Explorers unter Windows dazu führen, daß unter 0.8em formatierte Schriften mikroskopisch klein dargestellt werden. Abhilfe schafft hier, wie bei Efa - Einfach für alle nachzulesen ist, die folgende Angabe:

body { font-size:100.1%; } (die empfehlenswerte Voreinstellung)


Формула конвертирования пикселей в емы (px to ems)

1 / parent font-size * required pixel value = em value

Под "относительнымы" размерами шрифта подразумевается:

1.Что em вычисляются основываясь на размерах родительского элемента. Например если размер шрифта для родительского контейнера 16px, то размер шрифта для вложенных элементов будет тоже равен 16px. Если относительный размер шрифта для вложенного элемента определить как 0.75em то точный размер шрифта для этого элемента будет равен 0.75 * 16px = 12px.

2. Если пользователь увеличивает или уменьшает размер шрифта в браузере, то текст растягивается или сжимается соответственно.

Эластичный интерфейс гибкий и доступный для пользователей и по своей точности почти не уступают пикселям (px) и Вы сможете легко использовать относительные размеры (em) как только полностью поймете разницу между em и px.

Нет ничего проще, чем em. Где нужны масштабируемые размеры, будь то шрифт, будь то бэкграунд, будь то поля и отступы, использую em. Где масштабирование не нужно или искажает верстку - px.
Приведение в body: если основной текст сайта 16px, то font-size:100.1%. Если 14px, то font-size:87.5% и т.д.
Господа, читайте Э.Мейера - все ваши вопросы и заблуждения разрешатся.

No comments: