Высота шрифта

Оцените материал
(0 голосов)

Здравствуйте! В прошлом уроке мы разбирались как подключить внешние шрифты к веб-странице. В этом уроке поговорим о таком свойстве шрифта как высота.

Для установки размера шрифта используется свойство font-size:

div{
    font-size: 18px;
}

В данном случае высота шрифта составит 18 пикселей. Пиксели представляют наиболее часто используемые единицы измерения. Чтобы задать значение в пикселях, после самого значения идет сокращение "px". Если к тексту явным образом не применяется высота шрифта, то используются значения браузера по умолчанию. Например, для простого текста в параграфах это 16 пикселей. Это базовый стиль текста. Базовый стиль для разных элементов текста отличается: если для параграфов это 16 пикселей, то для заголовков h1 это 32 пикселя, для заголовков h2 - 24 пикселя и т..д. Для измерения шрифта также можно использовать самые разные единицы измерения.

Ключевые слова

В CSS имеется семь ключевых слов, которые позволяют назначить размер шрифта относительно базового:

  • medium: базовый размер шрифта браузера (16 пикселей)

  • small: 13 пикселей

  • x-small: 10 пикселей

  • xx-small: 9 пикселей

  • large: 18 пикселей

  • x-large: 24 пикселя

  • xx-large: 32 пикселя

Например:

font-size: x-large;

Проценты

Проценты позволяют задать значение относительно базового или унаследованного шрифта. Например:

font-size: 150%;

В данном случае высота шрифта будет составлять 150% от базового, то есть 16px * 1,5 = 24px

Наследование шрифта может изменить финальное значение. Например, следующую ситуацию:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шрифты в CSS3</title>
         
        <style>
            div {font-size: 10px;}
            p {font-size: 150%;}
        </style>
    </head>
    <body>
    <div>
        <p>Однажды в студеную зимнюю пору</p>
    </div>
    </body>
</html>

Просмотреть  пример

Здесь элемент p наследует от контейнера - блока div шрифт высотой в 10 пикселей. То есть 10 пикселей теперь будет базовым для параграфа.

Далее для элемента p определяется новая высота шрифта в 150%. Это значит, что финальная высота будет равна 10px * 1,5 = 15px.

Единица еm

Единица измерения еm во многом эквивалентна процентам. Так, 1em равен 100%, .5em равно 50% и т.д.

Прочитано 716 раз Последнее изменение Пятница, 26 августа 2016 18:29
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+