Главная/ CSS справочник/ Properties/ CSS свойство font-size | назначение, допустимые значения, примеры

Свойство font-size

Font-size – это свойство CSS, которое позволяет задавать размер шрифта для текста в веб-странице. Если вы хотите, чтобы текст на вашем сайте был читабельным и привлекательным для пользователей, то задание правильного размера шрифта является очень важным.

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

Font-size может быть задан в различных единицах измерения, таких как пиксели, эмы, проценты или точки. Если вы хотите контролировать размер шрифта на всем сайте, то используйте единые единицы измерения. Например, если вы выбрали пиксели, то постарайтесь использовать их везде, где возможно.

Допустимые значения

  • — точный размер шрифта в CSS-единицах измерения (px, pt)
  • — размер относительно размера шрифта родителя в CSS-единицах измерения (%, em, ex)
  • xx-small — эквивалентно font size=»1″ (относительно настроек браузера)
  • x-small — (относительно настроек браузера)
  • small — эквивалентно font size=»2″ (относительно настроек браузера)
  • medium — эквивалентно font size=»3″ (относительно настроек браузера)
  • large — эквивалентно font size=»4″ (относительно настроек браузера)
  • x-large — эквивалентно font size=»5″ (относительно настроек браузера)
  • xx-large — эквивалентно font size=»6″ (относительно настроек браузера)
  • larger — увеличивает размер шрифта на 1, относительно родительского элемента (эквивалентно font size=»+1″)
  • smaller— уменьшает размер шрифта на 1, относительно родительского элемента (эквивалентно font size=»-1″)
  • inherit — наследует значение от родителя
Значение по умолчанию medium
Применимо ко всем элементам
Наследование да
Версия CSS CSS 1
Поддерживается браузерами
  • Internet Explorer 6 и выше
  • Firefox 1 и выше
  • Opera 7 и выше
  • Netscape 6 и выше
  • Safari 1 и выше
  • Chrome 1 и выше

Пример


p {
font-size: 100%;
}
span {
font-size: 14px;
}
div {
font-size: small;
}

Также следует помнить, что не все шрифты одинаково читаемы. Некоторые шрифты более подходят для крупного размера, а другие – для маленького. Если вы используете нестандартные шрифты, то лучше их предварительно проверить на читабельность в различных размерах.

В целом, font-size – это важное свойство CSS, которое помогает сделать ваш сайт более удобным и привлекательным для пользователей. Однако, для того чтобы его использование было эффективным, нужно учитывать различные факторы, такие как единицы измерения, типы шрифтов, и дизайн вашей веб-страницы. Правильно примененный font-size может сделать ваш сайт более привлекательным и удобным для пользователей.

Заметки

  • отрицательные значения недопустимы
  • есть порог минимально допустимого размера шрифта, меньше которого браузеры не уменьшают шрифт (— 8px)

По теме