Использование изменяемого шрифта (em).
Что такое эластичный лэйаут (эластичное расположение)?
эластичный лэйаут - использование изменяемых размеров шрифта, зависящих от настройки шрифта в браузере.
Кроме того, при использовании изменяемых размеров шрифта, шрифт сайта принимает значение по умолчанию равное 16px - которое пользователь может изменить при желании.
Некоторые пользователи изменяют размеры шрифта для доступности, а некоторые используют UI контроль для изменения размера шрифта в случае необхоимости.
В эластичном дизайне используются значения em для всех элементов.
em - относительный размер и записывается как 1em, 0.5em, 1.5em и т.д.
em может быть определен до третьего знакак после запятой, например 1.063em.
Под "относительнымы" размерами шрифта подразумевается:
1.Что
em вычисляются основываясь на размерах родительского элемента. Например если размер шрифта для родительского контейнера 16px, то размер шрифта для вложенных элементов будет тоже равен 16px. Если относительный размер шрифта для вложенного элемента определить как 0.75em то точный размер шрифта для этого элемента будет равен 0.75 * 16px = 12px.
2. Если пользователь увеличивает или уменьшает размер шрифта в браузере, то текст растягивается или сжимается соответственно.
Эластичный интерфейс гибкий и доступный для пользователей и по своей точности почти не уступают пикселям (px) и Вы сможете легко использовать относительные размеры (em) как только полностью поймете разницу между em и px.
Введение в em
em - мощный и удобный в использовании для задания размеров шрифта сайта.
Какой бы не был размер шрифта 12px, 16 или 60, в em он всегда точно равен этому размеру.
em - еденица измерения в типографии. С чего было выбрано это название?
вот немного истории:
em изначально были равны размеру металического блока в печатных машинках это размер был равен ширину заглавной буквы "М"
Компьютеры используют так называемый "kerning" для выделения горизонтального места под каждую букву, делая буквы равноудаленными. Первоначально, металлический блок был урезан или “kerned”, чтобы сделать горизонтальное дополнение вокруг каждой буквы одинаковым.
Так, в CSS, em - фактически вертикальное измерение. Один em равняется вертикальному месту, необходимому для любой буквы в шрифте, независимо от горизонтального места, которое это занимает. Поэтому:
Если размер шрифта 16px, то 1em = 16px.
Начало
Прежде, чем мы начнем использовать em в css, мы должны знать то, что размер шрифта по умолчанию устанавливается в браузере. К счастью, мы знаем:
У всех популярных браузеров размер шрифта по умолчанию 16px. Поэтому, при настройках браузера по умолчанию, 1em = 16px.
Так, прежде, чем селектор CSS описан, размер шрифта по умолчанию в брауезер 16px. <body> наследует это если не описано другое в CSS. Поэтому 1em = 16px, 0.5em = 8px, 10em = 160px и так далее. Мы можем теперь определить любой размер элемента, в котором мы нуждаемся с помощью em!
Определение размера шрифта для <body>
Очень часто web разработчики определяют размер шрифта для <body> таким, каким будет размер шрифта основного текста или к эквиваленту 10px (0.625em или 62.5 %), так делать вычисление маленьких размеров легче. У обоих способов есть свой смысл, но кажется что логичней бы оставить размер шрифта по умолчанию равному 16px, как в браузере.
Если пользователь изменил размер шрифта в браузере, то лэйаут на сайте ломатся не будет, а будет приспосабливатся. Прекрасно, значит мы можем установить следующее:
body{font-size:1em;}
Однако, к сожелению, у популярного браузера IE существуют определенные проблемы с при использовании em. При изменении размера шрифта по умолчанию в браузерах IE5/6 наблюдается увеличение шрифта намного больше ожидаемого. Для избежанию этих проблемм в css следует прописать:
html{font-size:100%;}
Теперь размер шрифта в IE будет изменятся так, как нужно.
Для <body> нужно определить еще следующие стили в css, необходимые для оформления контента:
html{font-size:100%;}
body{
font-size:1em;
font-family:georgia, serif;
text-align:center;
color:#444;
background:#e6e6e6;
padding:0;
margin:0;
}
Формула конвертирования пикселей в емы (px to ems)
Вначале создания сайта с изменяемымы размерами шрифта приходится проводить много вычеслений. Чтоб не тратить много времени для конвертирования пикселей в емы есть специальная простая формула:
1 / parent font-size * required pixel value = em value
Для конвертирования пикселей в емы вы можете использовать
специальную таблицу конвертирования пикселей в емы Создание контейнера с изменяемым размером
Чтоб создать эластичный слой в контенте мы будем использовать ID для контейнера wrap
<div id="wrap">
...
</div>
Определим размер контейнера равному 740px для корректного отображения на экране монитора с разрешением 800*600:
1. Зададим ширину контейнера равной 740px. Так как для родительского контейнера <body> установлен шрифт 16px, то для нашего контейнера <div id="wrap"> ширина высчитывается так:
1em = 16px. Therefore, 1px = 1 / 16 = 0.0625em.
0.0625em * 740 = 46.25em
Или можна посчитать используя формулу:
1 / 16 * 740 = 46.25em
(1 / размер шрифта родительского контейнера * вычисляемый размер в пикселях = значение в em)
Вы можете использовать ту же самую формулу, чтобы вычислить значение размера в em для любой ширины или высоты, в которой Вы нуждаетесь.
2. Создаем описание css. body{
width:46.25em;
margin:1.5em auto;
border:0.063em solid #ccc;
background:#fff;
text-align:left;
}
Создание стилей текста с помощью em.
Вставим теги <h1> и <p> в наш контент:
<div id=
"wrap">
<h1> … <h1>
<p> … <p>
</div>
Мы знаем, что наши параграфы унаследовали 1em (16px) размер шрифта от его родителя, <div id = "обертка">. От нашего предыдущего вычисления мы уже знаем, что 1px 0.0625em.
0.0625 * 12 = 0.750em
Далее определим стили для параграфоф
p{
font-size:0.750em;
}
еще добавим внешние оступы для параграфоф и межстрочное растояние.
p{
font-size:0.750em;
line-height:1.5em;
margin:1.5em;
}
2. Зададим размер шрифта 18px для тега <h1> : Так как мы знаем что тег <h1> унаследовал от родительского контейнера размер шрифта 18px то вычисляется размер шрифта 18px для тега <h1> так:
0.0625 * 18 = 1.125em
Описываем стили для тега <h1> в css
h1{
font-size:1.125em;
}
Так же добавляем межстрочное растояние, внешние отступы и жирность шрифта:
h1{
font-size:1.125em;
line-height:1em;
margin:1em;
font-weight:300;
}
Размеры изображений в em.
Для задание размеров изображения в em, ширина и высота изображения должна быть кратным числом. Допустим у изображени высота и ширина равна 90px (18px*5). Так как у родительского контейнера размер шрифта равено 12px, то при переводе размеров изображения в em мы получим:
1 / 12 * 90 = 7.5em
опишем это в стилях css для изображения
p img{
width:7.5em;
height:7.5em;
}
а в html
<p>
<img src="/90.jpg" alt="Clevedon Pier" /> Lorem…
</p>
Для соблюдению семантики сайта, изображение не должно быть в пределах параграфа. В данном случае изображение находится в параграфе для наглядного описание наследования размеров в em для изображения.
Использование эластичного дизайна
Одними из достоинств изменяемых размеров являются- точность, контроль и доступность. Однако многие web мастера выражают свое недовольство по поводу использования изменяемых размеров и определили основные проблеммы. Среди них: при больших размерах текста, он выходи за пределы экрана.
При использовании изменяемых размеров для изображений видно искажение изображения при больших размерах, нам остается надеятся, что со временем в web начнут полноценно использоватся форматы изображений без потери качества при изменении их размеров.
Добавить комментарий
Комментарии
RSS лента комментариев этой записи.