Определение размеров шрифта в CSS

Определение размеров шрифта в CSS

Указание размера шрифта

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

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

значения: единица длины | процент, xx-маленький, x-маленький, маленький, средний, большой, x-большой, xx-большой, меньше, больше

по умолчанию: средний

Применимо: ко всем элементам

Наследует: да

Вы можете указать размер текста несколькими способами:

1. Используя одну из единиц длины CSS, как показано здесь:

h1 { font-size: 1.5em; }

При указании количества единиц убедитесь, что единица аббревиатуры должна следовать сразу за номером, например: margin: 2em;

Добавление пробела перед единицей приведет к тому, что свойство не будет работать.

INCORRECT: margin: 2 em;Можно не указывать единицу измерения для нулевых значений:

margin: 0;

2. В виде процентного значения, увеличенного или уменьшенного от унаследованного размера шрифта элемента:

h1{ font-size: 150%; }

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

strong { font-size: larger; }

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

Единицы измерения CSS

Здесь мы кратко рассмотрим различные единицы измерения.

Некоторые из них покажутся знакомыми (например, дюймы и миллиметры), но есть единицы, требующие более подробного объяснения: абсолютные единицы, бэр, эм и vw/vh. Знание того, как эффективно использовать блоки CSS, является еще одним из основных навыков CSS.

Единицы CSS

CSS3 предоставляет две широкие категории: абсолютные и относительные.

Абсолютные единицы

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

px пиксель, определяемый как равный 1/96 дюйма в CSS3

в дюймах

мм миллиметры

см сантиметры

q 1/4 миллиметра.

pt точек (1/72 дюйма). Пункты - это единица, обычно используемая в полиграфическом дизайне.

pc пика (1 пика = 12 точек или 1/6 дюйма). Пункты - это единица, обычно используемая в полиграфическом дизайне.

Относительные единицы

Относительные единицы измерения основаны на размере чего-то еще, например размера текста по умолчанию или размера родителя.

em — единица измерения, равная текущему размеру шрифта.

ex — x-height, соответственно высота строчной буквы «x» в шрифте.

rem — root-em, равный размеру em корневого элемента (html)

ch — нулевая ширина, равная ширине нуля (0) в текущем шрифте и размере.

vw — единица измерения ширины области просмотра, равная 1/100 ширины текущей области просмотра (окна браузера).

vh — единица измерения высоты окна просмотра, равная 1/100 **** текущего окна просмотра (высоты браузера).

vmin — минимальная единица области просмотра, равная значению vw или vh, в зависимости от того, что меньше.

vmax — максимальная единица области просмотра, равная значению vw или vh, в зависимости от того, что больше.

** Хотя это и не «единица», проценты являются еще одним распространенным значением измерения для элементов веб-страницы. Проценты рассчитываются относительно другого значения, например, значения свойства, примененного к текущему элементу или его родителю или предку. **

.. Дочерние элементы наследуют не относительные значения своих родителей, а результирующее вычисленное значение.

Подробнее о размерах шрифта

Абсолютные единицы

Абсолютные единицы имеют предопределенные значения или эквиваленты в реальном мире. Они всегда остаются неизменными, независимо от контекста, в котором они появляются.

Самая популярная абсолютная единица измерения для веб-дизайна — это пиксель, который CSS3 определяет как 1/96 дюйма. Однако относительные измерения, такие как rem, em и %, более подходят из-за текучей природы полотна.

Тем не менее, пиксели по-прежнему имеют свое место в веб-дизайне для элементов, которые остаются неизменными независимо от контекста. Ширина границ уместна в пикселях, как и изображения, имеющие собственные размеры в пикселях.

Относительные единицы

Они подходят для большинства веб-измерений, и есть несколько вариантов: rem, em и vw/vh.

единица рем

rem означает root em. rem основан на размере шрифта корневого ( html) элемента, что бы это ни случилось. . В современных браузерах размер корневого шрифта по умолчанию составляет 16 пикселей; таким образом, rem эквивалентен 16-пиксельной единице (если только вы явно не установили другое значение). Элемент размером 10rem будет иметь размер 160 пикселей.

По большей части вы можете использовать единицы rem как абсолютное измерение в правилах стиля; однако, поскольку это относительное значение, при изменении размера базового шрифта изменяется и размер rem. Если пользователь изменяет базовый размер шрифта на 24 пикселя для облегчения чтения на расстоянии или если страница отображается на устройстве с размером шрифта по умолчанию 24 пикселя, этот элемент 10rem становится 240 пикселов. Это кажется странным, но это не баг, а фича. Есть много случаев, когда вы хотите, чтобы элемент макета расширялся при увеличении размера текста. Страница пропорциональна размеру шрифта, что помогает поддерживать оптимальную длину строк.

единица измерения

em — это относительная единица измерения, которая в традиционной типографике основана на ширине заглавной буквы M (отсюда и название «em»). В спецификации CSS em рассчитывается как расстояние между базовыми линиями, когда шрифт установлен без дополнительного пробела между строками (также известного как интерлиньяж). Для текста с размером шрифта 16 пикселей; и так далее

Как только размер em для текстового элемента вычисляется браузером, его можно использовать для всех видов других измерений, таких как отступы, поля, а также ширина элемента на странице. Основание измерений на размере текста помогает сохранить пропорции при изменении размера текста.

Хитрость при работе с em заключается в том, чтобы помнить, что они всегда соответствуют текущему размеру шрифта элементов. Пример от Эрика Мейера и Эстель

Длина окна просмотра в процентах (vw/vh)

Ширина области просмотра (vw) и высота области просмотра (vh) не зависят от размера области просмотра (окна браузера). vw равен 1/100 ширины области просмотра. Точно так же vh равно 1/100 высоты области просмотра. Единицы на основе области просмотра полезны для того, чтобы изображения и текстовые элементы отображали всю ширину или высоту области просмотра:

header { 
	width: 100vw; 
	height: 100vh; 
}

Вы также можете указать в качестве единицы измерения определенный процент от размера окна, например 50%:

img { 
	width: 50vh; 
	height: 50vh; 
}

Relative — это единица vmin (равная значению vw или vh, в зависимости от того, что меньше) и vmax( равно значению vw или vh, в зависимости от того, что больше**)**

Подробнее о размерах шрифта

Абсолютные единицы

Абсолютные единицы имеют предопределенные значения или эквиваленты в реальном мире. Они всегда остаются неизменными, независимо от контекста, в котором они появляются.

Самая популярная абсолютная единица измерения для веб-дизайна — это пиксель, который CSS3 определяет как 1/96 дюйма. Однако относительные измерения, такие как rem, em и %, более подходят из-за текучей природы сети.

Тем не менее, пиксели по-прежнему имеют свое место в веб-дизайне для элементов, которые остаются неизменными независимо от контекста. Ширина границ уместна в пикселях, как и изображения, имеющие собственные размеры в пикселях.

Относительные единицы

Они подходят для большинства веб-измерений, и есть несколько вариантов: rem, em и vw/vh.

единица рем

rem означает root em. rem основан на размере шрифта корневого ( html) элемента, что бы это ни случилось. . В современных браузерах размер корневого шрифта по умолчанию составляет 16 пикселей; таким образом, rem эквивалентен 16-пиксельной единице (если только вы явно не установили другое значение). Элемент размером 10rem будет иметь размер 160 пикселей.

По большей части вы можете использовать единицы rem как абсолютное измерение в правилах стиля; однако, поскольку это относительно, если размер базового шрифта изменяется, то же самое происходит и с размером rem. Если пользователь изменяет базовый размер шрифта на 24 пикселя для облегчения чтения на расстоянии или если страница отображается на устройстве с размером шрифта по умолчанию 24 пикселя, этот элемент 10rem становится 240 пикселов. Это кажется странным, но это не баг, а фича. Есть много случаев, когда вы хотите, чтобы элемент макета расширялся при увеличении размера текста. Он сохраняет пропорции страницы размеру шрифта, что помогает поддерживать оптимальную длину строк.

единица измерения

em — это относительная единица измерения, которая в традиционной типографике основана на ширине заглавной буквы M (отсюда и название «em»). В спецификации CSS em рассчитывается как расстояние между базовыми линиями, когда шрифт установлен без дополнительного пробела между строками (также известного как интерлиньяж). Для текста с размером шрифта 16 пикселей; и так далее

Как только размер em для текстового элемента вычисляется браузером, его можно использовать для всех видов других измерений, таких как отступы, поля, а также ширина элемента на странице. Основание измерений на размере текста помогает сохранить пропорции при изменении размера текста.

Хитрость при работе с em заключается в том, чтобы помнить, что они всегда соответствуют текущему размеру шрифта элементов. Пример от Эрика Мейера и Эстель

Длина окна просмотра в процентах (vw/vh)

Ширина области просмотра (vw) и высота области просмотра (vh) не зависят от размера области просмотра (окна браузера). vw равен 1/100 ширины области просмотра. Точно так же vh равно 1/100 высоты области просмотра. Единицы на основе области просмотра полезны для того, чтобы изображения и текстовые элементы оставались на всю ширину или высоту области просмотра:

header { 
	width: 100vw; 
	height: 100vh; 
}

Вы также можете указать единицу измерения в процентах от размера окна, например 50%:

img { 
	width: 50vh; 
	height: 50vh; 
}

Относительными являются единицы vmin (равные значению vw или vh, в зависимости от того, что меньше) и vmax( равно значению vw или vh, в зависимости от того, что больше**)**

Назад к размеру шрифта

давайте вернемся к нашему обсуждению размера шрифта

размер текста с относительными значениями

Лучше всего устанавливать размер шрифта элементов веб-страницы таким образом, чтобы учитывать предпочтения пользователя. Значения относительного размера %, rem и em позволяют использовать размер шрифта по умолчанию в качестве основы для пропорционального изменения размера других текстовых элементов. Обычно не важно, чтобы заголовки были размером ровно 24 пикселя; важно, чтобы они были ровно 24 пикселя; важно, чтобы они были в 1,5 раза больше основного текста, чтобы выделялись. Если пользователь изменит свои настройки, увеличив размер шрифта по умолчанию, заголовки также станут крупнее.

Чтобы сохранить размер браузера по умолчанию, установите размер шрифта корневого элемента на 100% (см. примечание):

html {
	font-size: 100%; 
}

Это устанавливает основу для относительного размера. Поскольку размер шрифта по умолчанию для всех современных браузеров составляет 16 пикселей, мы предполагаем, что наш базовый размер будет равен 16 пикселям (мы также будем помнить, что он может быть другим).

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

h1 { font-size: 1.5rem; } /*1.5 * 16 = 24 */

Эм измерения

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

Здесь я использовал единицы em, чтобы указать размер h1, который унаследовал от корня 16-пиксельный размер шрифта по умолчанию:

h1 {font-size: 1.5em; } /* 1.5 * 16 = 24 */

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

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

Приведенный выше h1 был основан на унаследованном размере 16 пикселей. Но если бы этот h1 появился в элементе статьи, размер шрифта которого был установлен на 14 пикселей, он унаследовал бы размер 14 пикселей, и его результирующий размер был бы равен 21 пикселю (1,5 * 14 = 21).

Из приведенного выше примера видно, что набор элементов в ems может иметь разный размер в разных частях документа. Если вы хотите, чтобы h1 в статье также составлял 24 пикселя, вы можете рассчитать значение em, разделив целевой размер на его контекст: 24/14 = 1,71428871 em (эту цифру не нужно округлять down.. браузер знает, что с ним делать.)

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

Этот составной характер em — вот что привело к популярности предсказуемой единицы rem.

Итан Маркотт представил формулу цель ÷ контекст = результат в своей книге «Отзывчивый веб-дизайн (A Book Apart)». Это полезно для преобразования значений пикселей в проценты и ems.

Процентные значения

Мы видели процентное значение (100%), используемое для сохранения размера шрифта по умолчанию, но вы можете использовать процентные значения для любого элемента. Они довольно просты.

В этом примере h1 наследует размер 16px по умолчанию от элемента html, и применение значения 150% умножает это унаследованное значение. , в результате чего h1 составляет 24 пикселя;

h1 { font-size: 150 % } /* 150% of 16 = 24 */

Пример, чтобы обобщить все, что мы узнали