Таблица соответствий размеров шрифтов и ключевых слов задания размера (x-small, small, medium, large, x-larg)

Благодаря этой таблице можно с легкостью задавать размер шрифта в CSS любым Вашим любимым способом. Каким бы вы способом задания размера шрифта через CSS вы пользуетесь, иногда бывает необходимо подсмотреть, какое значение соответствует текущему в другой

Таблица соответствий размеров шрифтов и ключевых слов

» » Сообщение:

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

Кроме того, еще один полезный совет: чтобы легко было конвертировать размеры шрифта из 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)
И, кстати, существует проблема, проблему - несоответствие значений (размеров) в разных браузерах при задании по ключевым словам.
Проблема была описана в старенькой (но актуальной по сей день) книге Джеффри Зельдмана «Веб-дизайн по стандартам» и заключается она в том, что за базовые размеры шрифта в браузерах принимаются разные значения - 12 (для Firefox 3.5, Chrome, Safari 4) и 16px (Opera 10, IE6,7,8, соответственно).

Ключевое слово Размер шрифта
в 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.

xx-small, x-small, small, medium, large, x-large и xx-large, размер, фрифт, фонт



Похожие темыКомментарии ПросмотрыПоследнее сообщение
01525Скрипт подсчета символов и слов при...
Сообщение от: Fearfire
01203Как грамотно обрезать строку до N-с...
Сообщение от: Admin
0122Единоборство. Реальная история со с...
Сообщение от: Admin
0408Интервальный бег или Пара слов о пр...
Сообщение от: Admin
0383Склонение слов. function getWord()....
Сообщение от: Admin