Благодаря чудесной таблице можно с легкостью задавать размер шрифта в CSS любым Вашим любимым способом.
Не важно, каким способом задания размера шрифта в CSS вы пользуетесь, но иногда бывает необходимо подсмотреть, какое значение соответствует текущему в другой системе единиц (например, какому размеру в px или %, будет соответствовать шрифт, размером 1.4 em) или быстро перевести одни размеры в другие.
Чтобы это было просто, предлагаю держать для таких случаев перед глазами (или в закладках) следующую таблицу соответствия размеров шрифтов.
| Pt | Px | Em | % |
|---|---|---|---|
| 6 | 8 | 0.5 | 50 |
| 7 | 9 | 0.55 | 55 |
| 7.5 | 10 | 0.625 | 62.5 |
| 8 | 11 | 0.7 | 70 |
| 9 | 12 | 0.75 | 75 |
| 10 | 13 | 0.8 | 80 |
| 10.5 | 14 | 0.875 | 87.5 |
| 11 | 15 | 0.95 | 95 |
| 12 | 16 | 1 | 100 |
| 13 | 17 | 1.05 | 105 |
| 13.5 | 18 | 1.125 | 112.5 |
| 14 | 19 | 1.2 | 120 |
| 14.5 | 20 | 1.25 | 125 |
| 15 | 21 | 1.3 | 130 |
| 16 | 22 | 1.4 | 140 |
| 17 | 23 | 1.45 | 145 |
| 18 | 24 | 1.5 | 150 |
| 20 | 26 | 1.6 | 160 |
| 22 | 29 | 1.8 | 180 |
| 24 | 32 | 2 | 200 |
| 26 | 35 | 2.2 | 220 |
| 27 | 36 | 2.25 | 225 |
| 28 | 37 | 2.3 | 230 |
| 29 | 38 | 2.35 | 235 |
| 30 | 40 | 2.45 | 245 |
| 32 | 42 | 2.55 | 255 |
| 34 | 45 | 2.75 | 275 |
| 36 | 48 | 3 | 300 |
Источник такой замечательной таблички — devirtuoso.com
Кроме того, еще один полезный совет от автора (давно извсайт источник http://yapro.ru Wed Mar 17 2010 18:16:29 GMT+0300естный, но, скорее всего, не всем): чтобы легко было конвертировать размеры шрифта из em в px и обратно, установите размер шрифта для body:
body { font-size: 62.5% }
Таким образом, 1em теперь будет равен 10px, что значительно упростит расчеты. Например, теперь font-size: 12px будет равнозначен font-size: 1.2em и т.д. Но не забывайте про наследование при относительных размерах.
Дополнение
Внимательные верстальщики замечено, что в таблице не хватает еще одного способа задания размеров — через ключевые слова (xx-small, x-small, small, medium, large, x-large и xx-large). В попытке дополнить авторскую таблицу этими значениями, я наткнулся на одну давнюю проблему — несоответствие значений (размеров) ключевых слов по умолчанию в разных браузерах.сайт источник http://yapro.ru Wed Mar 17 2010 18:16:35 GMT+0300
Если не ошибаюсь, то проблема была подробно описана в старенькой (но актуальной по сей день и недавно переизданной) книге Джеффри Зельдмана «Веб-дизайн по стандартам» и заключается она в том, что за базовые размеры шрифта в браузерах принимаются разные значения (12 и 16px).
Вот что получилось у меня (для ознакомления любопытным):
| Ключевое слово | Размер шрифта в Firefox 3.5, Chrome, Safari 4, px | Размер шрифта в Opera 10, IE6,7,8, px |
|---|---|---|
| xx-small | 9 | 10 |
| x-small | 10 | 12 |
| small | 12 | 16 |
| medium | 16 | 18 |
| large | 18 | 24 |
| x-large | 24 | 32 |
| xx-large | 32 | 48 |
Моё мнение, что самый полный контроль над размерами шрифтов на сайтах предоставляют, конечно же, пиксели, а для печати удобнее всего использовать pt. Хотя на практике очень часто используют комбинированный метод %/em, чтобы обеспечить масштабируемость и контроль над размерами шрифта у пользователей IE6.
Источник: rotorweb.ru
Комментарии