Благодаря чудесной таблице можно с легкостью задавать размер шрифта в 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
