Войти
Регистрация

Шрифт и единицы измерения в CSS

Шрифт и единицы измерения

Здравствуйте, друзья!

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

В этой статье мы это повторим, а также я расскажу Вам как изменить размер шрифта и единицы измерения, которых несколько.

Указать шрифт и его размер можно следующим образом:

h1 {
   font-family: Arial;
   font-size: 14px;
}

Здесь мы указали размер шрифта в пикселях (px), пиксель это самая маленькая единица измерения и равна 1 пикселю на экране.

Единицы измерения делятся на 2 типа:

  • абсолютные - всегда статичные и не меняют размер.
  • относительные - меняют свой размер в зависимости от размера родительского блока или размера экрана.

И так, разберем сначала абсолютные, их несколько:

  • Пиксели (px) - самая маленькая единица, зависит от размера пикселя экрана.
  • Сантиметры и миллиметры (cm, mm) - тут все понятно, стандартные единицы измерения, их используют редко.
  • Дюймы (in) - 1 дюйм = 2,54см.
  • Пункты (pt) - размер его составляет 1,72 дюйма.
  • Пики () - 1 пика = 12 пунктов.

Из всего этого многообразия используется только пиксель, остальные уже давно в истории, я думаю. Пиксель статичен и не адаптивен к другим размерам экранов.

А теперь относительные единицы измерения:

Как Вы уже поняли, это адаптивные размеры шрифтов, которые подстраиваются под размер экрана, в большинстве своем.

  • Единица em - единица измерения, которая зависит от текущего размера шрифта на странице или у родительского блока. Если мы поставим размер 2em, то размер шрифта будет в 2 раза больше, чем текущий шрифт родительского элемента или всего сайта.
  • Проценты (%) - процент также, как em, устанавливается в зависимости от размера шрифта родительского элемента.
  • Vertical Height (vh) - размер шрифта, равный 1% от текущей высоты окна браузера.
    Размер этого текста зависит от высоты окна. Измените высоту окна браузера и этот текст изменит размер
  • Vertical Width (vw) - размер шрифта, равный 1% от текущей ширины окна браузера. Размер этого текста зависит от ширины окна. Измените ширину окна браузера и этот текст изменит размер
  • Vmin - значение принимается от размера меньшей стороны браузера. Если высота окна меньше ширины, то vmin = vh, если ширина окна меньше высоты, то vmin = vw
  • Vmax - значение принимается от размера большей стороны браузера. Если высота окна больше ширины, то vmax = vh, если ширина окна больше высоты, то vmax = vw

Относительные шрифты хорошо применяются при адаптивной верстке сайтов.

На практике используются лишь несколько единиц измерения, в частности это px, em, vw и vh. Я использую и абсолютные и относительные, Вы с опытом научитесь применять их не задумываясь, создавая статичные или адаптивные сайты.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?