Font size p: font-size — CSS: Cascading Style Sheets

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

Примеры

Пример 1

 
 

<голова>
  <стиль>
    .пример {
      размер шрифта: 200%;
    }
  

<тело>
   
Это заголовок
 
  
 Это пример установки размера шрифта текста в процентах.
  
Это абзац с размером шрифта по умолчанию.


 

Вывод

В приведенном выше примере мы указали размер шрифта элемента абзаца равным 200%. Единица измерения в процентах относится к размеру шрифта браузера по умолчанию. На изображении ниже показано, как текст отображается на экране:

Пример 2

 
 

<голова>
  <стиль>
    .длина {
      красный цвет;
      размер шрифта: 1 см;
    }
  

<тело>
   
свойство размера шрифта
 
  
Абзац длиной 1 см. 


 

Вывод

В приведенном выше примере мы указали размер шрифта элемента абзаца равным 1 см. На изображении ниже показано, как текст отображается на экране:

Установка размера шрифта в CSS

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

Мы можем использовать два типа ключевых слов для установки размера шрифта текста в CSS — Абсолютные и относительные ключевые слова .

1. Абсолютные ключевые слова

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

• xx-маленький (9 пикселей)
• х-маленький (10 пикселей)
• маленький (13 пикселей)
• средний (16 пикселей)
• большой (18 пикселей)
• x-большой (24px)
• xx-большой (32px) Для приведенного выше набора значений мы взяли размер шрифта по умолчанию для текущего браузера равным 16px. Среднее ключевое слово имеет тот же размер шрифта.

Пример

 
 

<голова>
  <стиль>
    ч2 {
      размер шрифта: xx-крупный;
    }
    h3 {
      размер шрифта: x-большой;
    }
    h4 {
      размер шрифта: большой;
    }
   

<тело>
   
Это заголовок
 
   
Это подзаголовок.
 
  
Это текст абзаца.
   
Это заголовок нижнего уровня.
 
  
Это еще один абзац текста.
  


 

Вывод

В приведенном выше примере мы установили размер шрифта всех элементов

на xx-large, что эквивалентно

— x-large, что эквивалентно

к большим элементам, что эквивалентно

принимает размер шрифта по умолчанию, эквивалентный 16px . Здесь мы указали размеры, используя ключевые слова, установленные браузером, а не пиксели. На изображении ниже показано, как текст отображается на экране:

2.

Слово относительный означает зависимость от чего-то другого. Таким образом, относительные ключевые слова — это те наборы единиц, размер шрифта которых изменяется относительно размера шрифта других элементов на веб-странице. Относительные ключевые слова размера шрифта, используемые разработчиками:

Пример

 
 

<голова>
<стиль>
  h2 {размер шрифта: больше;}
  h3 {размер шрифта: средний; }
  h4 {размер шрифта: меньше; }


<тело>
   
Это заголовок
 
   
Это подзаголовок.
 
   
Это заголовок нижнего уровня.
 
  
Это текст абзаца.
  
Это еще один абзац текста.


 

Выход

В приведенном выше примере мы установили размер шрифта для всех элементов

на средний, что эквивалентно

— больше, а для элементов

—

принимает размер шрифта по умолчанию, эквивалентный 16px . Здесь мы указали размеры, используя относительные ключевые слова. Ключевое слово «больше» делает текст больше, чем размер браузера по умолчанию. Ключевое слово

пикселей

Использование пикселей для изменения размера текста — это наиболее распространенный способ, который мы все использовали как разработчики. Пиксели — это абсолютные единицы измерения, которые помогают нам быть более точными. Веб-браузеры и операционные системы не влияют на единицы пикселей, поскольку они отображаются одинаково на всех экранах и во всех браузерах. При всех преимуществах пиксельные единицы имеют один недостаток — доступность. Мы не можем настроить размер шрифта текста, который определяется с помощью пикселей в некоторых браузерах, что делает его недоступным и сложным для использования пользователями с нарушениями зрения.

Пример

 
 

<голова>
  <стиль>
    ч2 {
      размер шрифта: 40px;
      цвет синий;
    }
    h3 {
      размер шрифта: 30px;
      цвет: небесно-голубой;
    }
    п {
      размер шрифта: 18px;
      цвет: фуксия;
    }
  

<тело>
   
Это СКАЛЕР
 
   
Это ТЕМЫ SCALER 2
 
  
Что такое CSS?
  
Объясните свойство размера шрифта в CSS.


 

Вывод

В приведенном выше примере мы установили размер шрифта всех элементов

на

на

на 18px . На изображении ниже показано, как текст выглядит на экране:

ems

ems единиц — это еще один способ установки размера шрифта в CSS. Это относительные единицы измерения, в которых в качестве эталона используется размер шрифта родительского элемента. Разработчики используют em единиц вместо пикселей, так как это позволяет изменять размер текста в соответствии с изменяющимся размером родительского элемента.

Давайте разберемся на примере. У нас есть абзац текста, написанный внутри контейнера. В контейнере указан размер шрифта 15px . Если пользователь устанавливает размер шрифта текста внутри контейнера равным 1em , это означает, что размер шрифта абзаца текста будет таким же, т. е. 20px . Таким образом, он примет размер шрифта своего родительского элемента. Если указанный размер шрифта текста равен 2em, то размер шрифта его родительского элемента будет в два раза больше.

Размер шрифта по умолчанию в большинстве браузеров равен 16px . Если мы не указываем размер шрифта для текста или его родительский элемент не имеет определенного размера шрифта, он принимает размер шрифта по умолчанию для этого браузера, который обычно составляет 16px . Таким образом, по умолчанию 1em соответствует размеру шрифта 16px , а 2em — размеру шрифта 32px .

Давайте разберемся с этим на примере, взяв размер шрифта веб-страницы равным 9. 0005 16px . Таким образом, чтобы вычислить размер шрифта текста в em , мы должны разделить на 16px . Таким образом, если мы хотим, чтобы наш заголовок имел размер 24px , он равен 1,5 em (24px/16px = 1,5 em) .

Пример

 
 

<голова>
  <стиль>
    ч2 {
      размер шрифта: 2.5em;
      /* 40px/16=2.5em */
      цвет синий;
    }
    h3 {
      размер шрифта: 1.875em;
      /* 30px/16=1.875em */
      цвет: небесно-голубой;
    }
    п {
      размер шрифта: 1em;
      /* 16px/16=1em */
      цвет: фуксия;
    }
  

<тело>
   
Это СКАЛЕР
 
   
Это ТЕМЫ SCALER 2
 
  
 
 В этой статье мы собираемся изучить размер шрифта в CSS.

  
Указание размера шрифта в em позволяет всем основным браузерам изменять размер текста.
    К сожалению, проблема со старыми версиями IE все еще существует. При изменении размера текста он становится больше/меньше, чем должен.


 

Вывод

В приведенном выше примере мы установили размер шрифта всех элементов

равным

2. 5em

равны

в 1.125em , что эквивалентно 18px . На изображении ниже показано, как текст отображается на экране:

rem

Единица измерения rem обозначает корень em , новое свойство CSS3 , используемое для установки размера шрифта текста. Это относительная единица измерения, ссылка на которую берется из корневого элемента, а не из его родительского элемента. Значения rem широко используются на веб-странице, поскольку они определяют размер шрифта, на который не влияет размер его родительского элемента. Вместо этого он принимает значение размера шрифта относительно всего документа. Давайте лучше разберемся с помощью примера. Если размер шрифта по умолчанию на нашей веб-странице равен

отображались с размером

2. 5rem

Пример

 
 

<голова>
  <стиль>
    ч2 {
      размер шрифта: 2.5rem;
      /* 40px/16=2.5rem */
      цвет синий;
    }
    h3 {
      размер шрифта: 1.875rem;
      /* 30px/16=1,875 бэр */
      цвет: небесно-голубой;
    }
    п {
      размер шрифта: 1rem;
      /* 16px/16=1rem */
      цвет: фуксия;
    }
  

<тело>
   
Это СКАЛЕР
 
   
Это ТЕМЫ SCALER
 
  
В этой статье мы собираемся изучить размер шрифта в CSS.
  
В этом примере показано использование rem единиц измерения размера шрифта в CSS.


 

Вывод

В приведенном выше примере мы установили размер шрифта всех элементов

равным

равны

в 1rem , что эквивалентно 16px . На изображении ниже показано, как текст отображается на экране:

Ex

Единица измерения ex также является динамической единицей для установки размера шрифта элемента. Он использует x-height текущего размера шрифта в CSS в качестве ссылки. Значение умножается на указанный размер шрифта, что соответственно увеличивает размер шрифта.

Пример

 
 

<голова>
  <стиль>
    .div1 {
      размер шрифта: 30px;
      граница: 1px сплошной черный;
    }
    .div2 {
      размер шрифта: 40px;
      граница: 1px сплошной черный;
    }
    охватывать {
      размер шрифта: 1ex;
    }
  

<тело>
  
Размер шрифта элемента div установлен на 30 пикселей. 
 Элемент span внутри элемента div имеет размер шрифта 1ex.
  
Размер шрифта элемента div установлен на 30 пикселей. Элемент span внутри элемента div имеет размер шрифта 1ex.


 

Вывод

В приведенном выше примере мы установили размер шрифта всего текста внутри div1 как 30px и внутри div2 как 40px. Текст внутри элемента span имеет размер шрифта 1ex. Но видно, что они оба имеют разные размеры. Это связано с тем, что единица измерения ex относится к унаследованному шрифту текущего элемента. На изображении ниже показано, как текст отображается на экране:

Единицы области просмотра (vw)

Единицы области просмотра — это единицы измерения, в которых в качестве эталона используется процент от размера области просмотра браузера.

Единицы области просмотра представляют собой процент от размера области просмотра браузера. Таким образом, 1% высоты области просмотра равен 1vh. Если окно просмотра имеет высоту 2000 пикселей, то 1vh равно 20 пикселям.

Единицы просмотра используются для измерений, когда мы хотим, чтобы размер текста менялся в зависимости от размера браузера. Это обеспечивает лучший пользовательский опыт, поскольку автоматически адаптируется к различным браузерам и устройствам разных размеров.

Давайте лучше разберемся на примере.

Пример 1

 
 

<голова>
  <стиль>
    ч2 {
      размер шрифта: 20vw;
    }
  

<тело>
   
Здравствуйте
 
  
Измените размер окна браузера, чтобы увидеть, как изменится размер шрифта h2. 
  
1vw = 1 % ширины области просмотра.
  
Единица vw не поддерживается в IE8 и более ранних версиях.


 

Вывод

В приведенном выше примере мы установили размер шрифта всего текста внутри элемента

равным 20vw. Текст внутри элемента

имеет размер шрифта по умолчанию. Здесь размер шрифта 20vw меняется в зависимости от размера браузера. Размер шрифта 20vw равен 20% ширины браузера. Вы можете изменить высоту браузера, чтобы увидеть изменения размера заголовка. На изображении ниже показано, как текст отображается на экране:

Пример 2

 
 

<голова>
  <стиль>
    ч2 {
      размер шрифта: 20vh;
    }
  

<тело>
   
Здравствуйте
 
  
Измените размер окна браузера, чтобы увидеть, как изменится размер шрифта h2.
  
1vh = 1% высоты области просмотра.
  
Единица vh не поддерживается в IE8 и более ранних версиях.


 

Вывод

В приведенном выше примере мы установили размер шрифта всего текста внутри элемента

равным 20vh.

имеет размер шрифта по умолчанию. Здесь размер шрифта 20vh меняется в зависимости от размера браузера. Размер шрифта 20vh равен 20% высоты браузера. Вы можете изменить высоту браузера, чтобы увидеть изменения размера заголовка. На изображении ниже показано, как текст отображается на экране:

Поддержка браузера

Ниже приведен список первой версии браузера, которая полностью поддерживает следующий размер шрифта в CSS.

Заключение

• Размер шрифта в CSS это свойство, используемое для изменения размера различных элементов в HTML.
• Мы используем множество единиц измерения, таких как em, px, rem, cm, vh, vw и т. д.
• Они существуют в основном в двух категориях — Относительные единицы и Абсолютные единицы .
• Абсолютные единицы — это единицы измерения, которые не зависят ни от чего на веб-странице или от размера браузера.
• Относительные единицы — это те единицы измерения, которые зависят от размера шрифта родительского элемента или зависят от размера браузера.

Вы также можете обратиться к похожим статьям по связанным темам, например:

• Кнопка CSS
• Переменные CSS
• CSS границы
• Поле CSS
• Анимации CSS

размер шрифта · WebPlatform Docs

Резюме

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

Обзорная таблица

Исходное значение

средний

Относится к

Все элементы

Унаследовано

Да

СМИ

визуальный

Расчетное значение

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

Анимируемый

Да

Свойство объектной модели CSS

размер шрифта

Синтаксис

• размер шрифта: абсолютные ключевые слова
• размер шрифта: наследовать
• размер шрифта: длина
• размер шрифта: процент
• размер шрифта: относительные ключевые слова

Значения

абсолютные ключевые слова

Набор ключевых слов, указывающих предопределенные размеры шрифта, которые масштабируются в соответствии с настройками шрифта или значениями по умолчанию каждого браузера. Возможные значения от наименьшего к наибольшему: xx-small , x-small , small , средний , большой , x-большой и xx-большой .

относительных ключевых слов

Набор ключевых слов, интерпретируемых относительно родительского элемента font-size — либо меньше , либо больше .

длина

Абсолютное значение единицы измерения: разрешены любые стандартные единицы длины css. Отрицательные длины недопустимы.

процентов

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

унаследовать

Ключевое слово inherit приводит к тому, что элемент принимает размер шрифта своего родительского элемента.

Примеры

Подборка примеров, показывающих некоторые типичные случаи использования свойства font-size.

 
Пример первый: мы ♥ WebPlatform Docs!
Пример второй: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, eos, dicta nihil aliquid quia dolores Labore nesciunt unde consectetur blanditiis ex eius consequatur qui incidunt voluptatem Inventore fugit quos amet!
Пример 3: Eius, earum unde eum differentio ex accusamus rem eligendi optio mollitia deleniti? Iure, accusamus, fuga ipsa quas doloremque enim velit sed est earum pariatur ab optio quia molestiae repellendus non.
 

 .пример-один {
    размер шрифта: 1.2em;
}
.пример-два {
    размер шрифта: маленький;
}
.пример-три {
    размер шрифта: 28px;
}
 

Просмотреть живой пример

Переопределение типичного 16px размера шрифта браузера по умолчанию medium значения как 10px , за которым следует пропорциональное изменение размера последующего текста.

 html { размер шрифта: 62,5%; }
/*
16 * 62,5% == 10
*/
. example-one {размер шрифта: 3.6rem} /* 36px */
.example-two {размер шрифта: 2.4rem} /* 24px */
.example-three {размер шрифта: 1.4rem} /* 14px */
 

Просмотреть живой пример

Использование

 Ключевые слова, такие как большие и средние или относительные em или процентные единицы, как правило, безопаснее использовать, чем измерения в пикселях, особенно для мобильных веб-браузеров, которые настраивают свой набор размеров шрифта по умолчанию для удобочитаемости. Использование процентных значений или значений в ems приводит к более надежным и каскадным таблицам стилей.
 

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

В то время как исходный размер , средний размер , широко применяется, браузеры применяют таблицу стилей по умолчанию, которая изменяет ее для различных семантических элементов, например, увеличивая размер заголовков. Браузеры также автоматически изменяют размер шрифта при масштабировании страницы, шагая по значениям, которые могут не точно соответствовать коэффициенту масштабирования. Если не отключено с помощью text-size-adjust , шрифты также изменяют размер при переключении между книжной и альбомной ориентацией в мобильных браузерах. Обзор проблемы см. в разделе Мобильное окно просмотра и ориентация.

Значение font-size также влияет на значение line-height при использовании значений по умолчанию или относительных измерений.

Наряду со многими другими свойствами CSS, font-size также можно применять непосредственно как атрибут SVG:

Связанные характеристики

Модуль шрифтов CSS, уровень 3

Рабочий проект

Модуль значений и единиц CSS, уровень 3

Рекомендация кандидата

Каскадные таблицы стилей, уровень 2, редакция 1 (CSS 2. 1), спецификация

Рекомендация W3C

См. также

Статьи по теме

Шрифт CSS

• семейство шрифтов

• кернинг шрифта

• переопределение языка шрифта

• размер шрифта

• настройка размера шрифта

• стиль шрифта

• шрифт-синтез

• вариант шрифта

• режим кернинга

• кернинг-пара-порог

• рендеринг текста

• подчеркивание текста

• изменение пользователем

Шрифты

• @font-face

• Свойства шрифта

• вариант шрифта

• шрифт

• семейство шрифтов

• настройки функций шрифта

• кернинг шрифта

• переопределение языка шрифта

• размер шрифта

• настройка размера шрифта

• растяжка шрифта

• стиль шрифта

• шрифт-синтез

• вариант шрифта

• максимальный размер шрифта

• минимальный размер шрифта

• изменение пользователем

• размер

• шрифт

Текст

• блок-последовательность

• переопределение языка шрифта

• размер шрифта

• шрифт-синтез

• висящая пунктуация

• hyphenate-limit-chars

• дефис-ограничительные линии

• дефис-ограничение-зона

• дефис

• ime-режим

• макет-поток

• макет-сетка

• макет-сетка-символ

• макет-линия сетки

• макет-сетка-режим

• макет-сетка

• межбуквенный интервал

• разрыв строки

• максимальный размер шрифта

• минимальный размер шрифта

• многоточие с переполнением текста

• режим переполнения текста

• рендеринг текста

• позиция подчеркивания текста

• стиль подчеркивания текста

• ширина подчеркивания текста

• пользовательский ввод

• изменение пользователем

• Текст

• размер

• б

• б

• бр

• бр

• заголовок

• ссылка

• код

• дел

• ДФН

• эм

• шрифт

• час

• и

• дюймов

• кбод

• знак

• самп

• сильный

• Достижение типографских эффектов с помощью тега canvas

Другие статьи

• Основы стиля текста CSS

Внешние ресурсы

• Smashing: 16 пикселей: для основного текста.