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

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

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)

По теме

Смотрите также в этом разделе

Смежные материалы, которые могут быть вам полезны

  • CSS свойство animation
  • CSS свойство animation-delay
  • CSS свойство animation-direction
  • CSS свойство animation-duration
  • CSS свойство animation-iteration-count
  • CSS свойство animation-name
  • CSS свойство animation-play-state
  • CSS свойство animation-timing-function
  • CSS свойство appearance
  • CSS свойство azimuth | назначение, допустимые значения, примеры
  • CSS свойство backface-visibility
  • CSS свойство background | назначение, допустимые значения, примеры
  • CSS свойство background-attachment | назначение, допустимые значения, примеры
  • CSS свойство background-clip | назначение, допустимые значения, примеры
  • CSS свойство background-color | назначение, допустимые значения, примеры
  • CSS свойство background-image | назначение, значения по умолчанию, примеры
  • CSS свойство background-origin | назначение, допустимые значения, примеры
  • CSS свойство background-position | назначение, значения по умолчанию, примеры
  • CSS свойство background-repeat | назначение, допустимые значения, примеры
  • CSS свойство border | назначение, допустимые значения, примеры
  • CSS свойство border-bottom | назначение, допустимые значения, примеры
  • CSS свойство border-bottom-color | назначение, допустимые значения, примеры
  • CSS свойство border-bottom-left-radius | назначение, допустимые значения, примеры
  • CSS свойство border-bottom-right-radius | назначение, допустимые значения, примеры
  • CSS свойство border-bottom-style | назначение, допустимые значения, примеры
  • CSS свойство border-bottom-width | назначение, допустимые значения, примеры
  • CSS свойство border-collapse | назначение, допустимые значения, примеры
  • CSS свойство border-color | назначение, допустимые значения, примеры
  • CSS свойство border-image | назначение, допустимые значения, примеры
  • CSS свойство border-image-outset | назначение, допустимые значения, примеры
  • CSS свойство border-image-repeat | назначение, допустимые значения, примеры
  • CSS свойство border-image-slice | назначение, допустимые значения, примеры
  • CSS свойство border-image-source | назначение, допустимые значения, примеры
  • CSS свойство border-image-width | назначение, допустимые значения, примеры
  • CSS свойство border-left | назначение, допустимые значения, примеры
  • CSS свойство border-left-color | назначение, допустимые значения, примеры
  • CSS свойство border-left-style | назначение, допустимые значения, примеры
  • CSS свойство border-left-width | назначение, допустимые значения, примеры
  • CSS свойство border-radius | назначение, допустимые значения, примеры
  • CSS свойство border-right | назначение, допустимые значения, примеры
  • CSS свойство border-right-color | назначение, допустимые значения, примеры
  • CSS свойство border-right-style | назначение, допустимые значения, примеры
  • CSS свойство border-right-width | назначение, допустимые значения, примеры
  • CSS свойство border-spacing | назначение, допустимые значения, примеры
  • CSS свойство border-style | назначение, допустимые значения, примеры
  • CSS свойство border-top | назначение, допустимые значения, примеры
  • CSS свойство border-top-left-radius | назначение, допустимые значения, примеры
  • CSS свойство border-top-right-radius | назначение, допустимые значения, примеры
  • CSS свойство border-top-width | назначение, допустимые значения, примеры
  • CSS свойство border-width | назначение, допустимые значения, примеры
  • CSS свойство bottom | назначение, допустимые значения, примеры
  • CSS свойство box-shadow | назначение, допустимые значения, примеры
  • CSS свойство box-sizing | назначение, допустимые значения, примеры
  • CSS свойство break-after | назначение, допустимые значения, примеры
  • CSS свойство break-before | назначение, допустимые значения, примеры
  • CSS свойство break-inside | назначение, допустимые значения, примеры
  • CSS свойство caption-side | назначение, допустимые значения, примеры
  • CSS свойство clear | назначение, допустимые значения, примеры
  • CSS свойство clip | назначение, допустимые значения, примеры
  • CSS свойство color | назначение, допустимые значения, примеры
  • CSS свойство column-count | назначение, допустимые значения, примеры
  • CSS свойство column-gap | назначение, допустимые значения, примеры
  • CSS свойство column-rule | назначение, допустимые значения, примеры
  • CSS свойство column-rule-color | назначение, допустимые значения, примеры
  • CSS свойство column-rule-style | назначение, допустимые значения, примеры
  • CSS свойство column-rule-width | назначение, допустимые значения, примеры
  • CSS свойство column-span | назначение, допустимые значения, примеры
  • CSS свойство column-width | назначение, допустимые значения, примеры
  • CSS свойство columns | назначение, допустимые значения, примеры
  • CSS свойство content | назначение, допустимые значения, примеры
  • CSS свойство counter-increment | назначение, допустимые значения, примеры
  • CSS свойство counter-reset | назначение, допустимые значения, примеры
  • CSS свойство cue | назначение, допустимые значения, примеры
  • CSS свойство cue-after | назначение, допустимые значения, примеры
  • CSS свойство cue-before | назначение, допустимые значения, примеры
  • CSS свойство direction | назначение, допустимые значения, примеры
  • CSS свойство display | назначение, допустимые значения, примеры
  • CSS свойство elevation | назначение, допустимые значения, примеры
  • CSS свойство empty-cells | назначение, допустимые значения, примеры
  • CSS свойство float | назначение, допустимые значения, примеры
  • CSS свойство font | назначение, допустимые значения, примеры
  • CSS свойство font-family | назначение, допустимые значения, примеры
  • CSS свойство font-size-adjust | назначение, допустимые значения, примеры
  • CSS свойство font-stretch | назначение, допустимые значения, примеры
  • CSS свойство font-style | назначение, допустимые значения, примеры
  • CSS свойство font-variant | назначение, допустимые значения, примеры
  • CSS свойство font-weight | назначение, допустимые значения, примеры
  • CSS свойство height | назначение, допустимые значения, примеры
  • CSS свойство left | назначение, допустимые значения, примеры
  • CSS свойство letter-spacing | назначение, допустимые значения, примеры
  • CSS свойство line-height | назначение, допустимые значения, примеры
  • CSS свойство list-style | назначение, допустимые значения, примеры
  • CSS свойство list-style-image | назначение, допустимые значения, примеры
  • CSS свойство list-style-position | назначение, допустимые значения, примеры
  • CSS свойство list-style-type | назначение, допустимые значения, примеры
  • CSS свойство margin | назначение, допустимые значения, примеры
  • CSS свойство margin-bottom | назначение, допустимые значения, примеры
  • CSS свойство margin-left | назначение, допустимые значения, примеры
  • CSS свойство margin-right | назначение, допустимые значения, примеры
  • CSS свойство margin-top | назначение, допустимые значения, примеры
  • CSS свойство marquee-direction | назначение, допустимые значения, примеры
  • CSS свойство marquee-play-count | назначение, допустимые значения, примеры
  • CSS свойство marquee-speed | назначение, допустимые значения, примеры
  • CSS свойство marquee-style | назначение, допустимые значения, примеры
  • CSS свойство max-height | назначение, допустимые значения, примеры
  • CSS свойство max-width | назначение, допустимые значения, примеры
  • CSS свойство min-height | назначение, допустимые значения, примеры
  • CSS свойство min-width | назначение, допустимые значения, примеры
  • CSS свойство nav-down | назначение, допустимые значения, примеры
  • CSS свойство nav-index | назначение, допустимые значения, примеры
  • CSS свойство nav-left | назначение, допустимые значения, примеры
  • CSS свойство nav-right | назначение, допустимые значения, примеры
  • CSS свойство nav-up | назначение, допустимые значения, примеры
  • CSS свойство opacity | назначение, допустимые значения, примеры
  • CSS свойство orphans | назначение, допустимые значения, примеры
  • CSS свойство outline-color | назначение, допустимые значения, примеры
  • CSS свойство outline-offset | назначение, допустимые значения, примеры
  • CSS свойство outline-style | назначение, допустимые значения, примеры
  • CSS свойство outline-width | назначение, допустимые значения, примеры
  • CSS свойство overflow | назначение, допустимые значения, примеры
  • CSS свойство overflow-x | назначение, допустимые значения, примеры
  • CSS свойство overflow-y | назначение, допустимые значения, примеры
  • CSS свойство padding | назначение, допустимые значения, примеры
  • CSS свойство padding-bottom | назначение, допустимые значения, примеры
  • CSS свойство padding-left | назначение, допустимые значения, примеры
  • CSS свойство padding-right | назначение, допустимые значения, примеры
  • CSS свойство padding-top | назначение, допустимые значения, примеры
  • CSS свойство page-break-after | назначение, допустимые значения, примеры
  • CSS свойство page-break-before | назначение, допустимые значения, примеры
  • CSS свойство page-break-inside | назначение, допустимые значения, примеры
  • CSS свойство pause | назначение, допустимые значения, примеры
  • CSS свойство pause-after | назначение, допустимые значения, примеры
  • CSS свойство pause-before | назначение, допустимые значения, примеры
  • CSS свойство perspective | назначение, допустимые значения, примеры
  • CSS свойство perspective-origin | назначение, допустимые значения, примеры
  • CSS свойство pitch | назначение, допустимые значения, примеры
  • CSS свойство pitch-range | назначение, допустимые значения, примеры
  • CSS свойство play-during | назначение, допустимые значения, примеры
  • CSS свойство position | назначение, допустимые значения, примеры
  • CSS свойство quotes | назначение, допустимые значения, примеры
  • CSS свойство resize | назначение, допустимые значения, примеры
  • CSS свойство richness | назначение, допустимые значения, примеры
  • CSS свойство right | назначение, допустимые значения, примеры
  • CSS свойство speak | назначение, допустимые значения, примеры
  • CSS свойство speak-header | назначение, допустимые значения, примеры
  • CSS свойство speak-numeral | назначение, допустимые значения, примеры
  • CSS свойство speak-punctuation | назначение, допустимые значения, примеры
  • CSS свойство speech-rate | назначение, допустимые значения, примеры
  • CSS свойство src | назначение, допустимые значения, примеры
  • CSS свойство stress | назначение, допустимые значения, примеры
  • CSS свойство table-layout | назначение, допустимые значения, примеры
  • CSS свойство text-align | назначение, допустимые значения, примеры
  • CSS свойство text-decoration | назначение, допустимые значения, примеры
  • CSS свойство text-indent | назначение, допустимые значения, примеры
  • CSS свойство text-overflow | назначение, допустимые значения, примеры
  • CSS свойство text-shadow | назначение, допустимые значения, примеры
  • CSS свойство text-transform | назначение, допустимые значения, примеры
  • CSS свойство top | назначение, допустимые значения, примеры
  • CSS свойство transform
  • CSS свойство transform-origin
  • CSS свойство transform-style | назначение, допустимые значения, примеры
  • CSS свойство transition | назначение, допустимые значения, примеры
  • CSS свойство transition-delay | назначение, допустимые значения, примеры
  • CSS свойство transition-duration | назначение, допустимые значения, примеры
  • CSS свойство transition-property | назначение, допустимые значения, примеры
  • CSS свойство transition-timing-function | назначение, допустимые значения, примеры
  • CSS свойство unicode-bidi | назначение, допустимые значения, примеры
  • CSS свойство unicode-range | назначение, допустимые значения, примеры
  • CSS свойство vertical-align | назначение, допустимые значения, примеры
  • CSS свойство visibility | назначение, допустимые значения, примеры
  • CSS свойство volume | назначение, допустимые значения, примеры
  • CSS свойство white-space | назначение, допустимые значения, примеры
  • CSS свойство widows | назначение, допустимые значения, примеры
  • CSS свойство width | назначение, допустимые значения, примеры
  • CSS свойство word-spacing | назначение, допустимые значения, примеры
  • CSS свойство word-wrap | назначение, допустимые значения, примеры
  • CSS свойство z-index | назначение, допустимые значения, примеры
  • Свойство border-top-style | назначение, допустимые значения, примеры