), но вы можете выбрать какой-нибудь другой, благо выбор сейчас достаточно большой.
В любом случае наш >h1 выглядит таким маленьким именно по этой причине: он наследует стиль >font size 100 %, который мы задали родительскому элементу >body, а установленный в браузере по умолчанию кегль – 16 пикселей.
Теперь, если пиксели нас устраивают, мы можем перевести значения из оригинал-макета непосредственно в CSS:
>h1 {
>font-size: 24px;
>font-style: italic;
>font-weight: normal;
>}
>h1 a {
>color: #747474;
>font: bold 11px Calibri, Optima, Arial, sans-serif;
>letter-spacing: 0.15em;
>text-transform: uppercase;
>text-decoration: none;
>}
Нет ничего плохого или неправильного в определении размера текста с помощью пикселей. Но в целях нашего эксперимента давайте начнем думать пропорционально и переведем значения кегля (>font-size) из пикселей в относительные единицы, а вместо пикселей и будем использовать знакомые нам >em.
Контекстное восстановление
Сейчас будет немного математики: берем целевое значение кегля и делим на кегль (>font size) его контейнера, то есть контекста. В результате мы получаем желаемый кегль, выраженный в относительных и достаточно гибких единицах >em.
Другими словами, относительный кегль можно рассчитать по следующей формуле:
>target ÷ context = result
(Отвлечемся на минутку. Лично у меня слово «математика» вызывает немедленный и серьезный приступ паники. У вас тоже? Стойте, не убегайте с криками – все не так страшно. Это говорит вам человек, который заменил курс математики в колледже курсом философии. Делайте, как я: просто посчитайте все на калькуляторе и скопируйте результат в CSS. Калькуляторы – просто спасение для таких, как мы, правда?)
Итак, формула у нас есть, давайте вернемся к нашему заголовку в >24px. Если предположить, что базовый кегль (>font size) элемента >body равен >16 пикселям при >100 %, мы можем подставить эти значения непосредственно в формулу. В результате получим отношение целевого кегля заголовка >h1
(24 пикселя, >24px) и кегля его контекста (16 пикселей, >16px):
>24: 16 = 1,5
Так как 24 пикселя в 1,5 раза больше 16 пикселей, это значит, что кегль равен >1,5 em.
>h1 {
>font-size: 1.5em; /* 24px / 16px */
>font-style: italic;
>font-weight: normal;
>}
Вуаля! Размер нашего заголовка прекрасно совпадает с размером, указанным в оригинал-макете, но при этом выражен в относительных, масштабируемых единицах (рис. 2.7).
(Обычно я оставляю комментарий с расчетами с правой стороны (>/* 24px / 16px */
