Размеры шрифтов css: CSS3 | Высота шрифта |

Posted:

Янв 13, 2023

Comments:

Размеры шрифтов css: CSS3 | Высота шрифта

Содержание

font-size | htmlbook.ru

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
6.0+	8.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Краткая информация

Значение по умолчанию	medium
Наследуется	Да
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Определяет размер шрифта элемента. Размер может быть установлен несколькими
способами. Набор констант (xx-small, x-small, small,
medium, large, x-large, xx-large) задает размер, который называется абсолютным.
По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера
и операционной системы.

Другой набор констант (larger, smaller)
устанавливает относительные размеры шрифта. Поскольку размер унаследован от
родительского элемента, эти относительные размеры применяются к родительскому
элементу, чтобы определить размер шрифта текущего элемента.

В конечном итоге, размер шрифта сильно зависит от значения свойства font-size у родителя элемента.

Сам размер шрифта определяется как высота от базовой линии до верхней границы кегельной площадки, как показано на рис. 1.

Рис. 1. Размер шрифта

Синтаксис

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Значения

Для задания абсолютного размера используются следующие значения: xx-small,
x-small, small, medium,
large, x-large, xx-large.
Их соответствие с размером шрифта в HTML приведено в табл. 1.

Табл. 1. Размер шрифта в CSS и HTML
CSS	xx-small	x-small	small	medium	large	x-large	xx-large
HTML	1		2	3	4	5	6	7

Относительный размер шрифта задается значениями larger и smaller.

Также разрешается использовать любые допустимые единицы CSS: em
(высота шрифта элемента), ex (высота символа х),
пункты (pt), пикселы (px),
проценты (%) и др. За 100% берется размер шрифта
родительского элемента. Отрицательные значения не допускаются.

inherit: Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>font-size</title>
  <style>
   h2 {
    font-family: 'Times New Roman', Times, serif; /* Гарнитура текста */ 
    font-size: 250%; /* Размер шрифта в процентах */ 
   } 
   p {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 11pt; /* Размер шрифта в пунктах */ 
   }
  </style>
 </head> 
 <body> 
  <h2>Duis te feugifacilisi</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.  
  Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit 
  lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 2. Применение свойства font-size

Объектная модель

[window.]document.getElementById(«elementID»).style.fontSize

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Шрифт

CSS по теме

font-size

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

Добавление CSS
Единицы измерения
Свойства текста

Рецепты CSS

CSS: Стиль и размер шрифта

Стиль шрифта

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

Стиль шрифта

Свойство font-style позволяет выделить текст курсивным, наклонным начертанием или наоборот придать тексту стандартный вид. Данное свойство имеет всего три значения:

normal — стандартный текст, имеющий обычное начертание, то есть не курсивное и не наклонное

italic — курсивное начертание

oblique — наклонное начертание

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p. exnormal { font-style: normal; }
      p.exitalic { font-style: italic; }
      p.exoblique { font-style: oblique; }
    </style>
  </head>

  <body>
    <p>Абзац со значением normal.</p>
    <p>Абзац со значением italic.</p>
    <p>Абзац со значением oblique.</p>
  </body>
</html>

Попробовать »

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

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

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

Для изменения размера шрифта используется свойство font-size. Существует несколько способов указать размер шрифта, рассмотрим наиболее распространенные из них:

Пиксели

Значения в пикселях используются часто, поскольку такой подход предоставляет очень точный контроль над размером. Числовое значение заканчивает буквенными символами px, которые должны следовать сразу после числа (между числом и px не должно быть пробела).

body { font-size: 14px; }

Проценты

По умолчанию размер шрифта в браузерах равен 16px. Таким образом, значение 100% соответствует 16px, а 200% — 32px. Если вы определите правило, задающее всему тексту внутри элемента <body> значение 75% от размера по умолчанию (это будет соответствовать 12px), а затем определите еще одно правило, которое задает значение 75% для его дочернего элемента, то размер шрифта в этом элементе будет равен 9px (то есть 75% от 12px).

body { font-size: 100%; }

EM

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

body { font-size: 14px; }
h3 { font-size: 1.2em; }

В примере мы задали элементу <body> размер шрифта 14px, а для всех элементов <h3> — 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков <h3> будет составлять 1,2 размера шрифта элемента <body>, что означает в 1,2 раза больше, чем 14px, и примерно равняется 17px. (На самом деле размер будет равняться 16,8, но большинство браузеров округлит его до 17.)

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

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

CSS предлагает семь ключевых слов, которые позволяют назначить размер шрифта относительно размера по умолчанию (16px): xx-small, x-small, small, medium, large, x-large и xx-large.

p { font-size: small; }

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.class1 { font-size: 120%; }
      p.class2 { font-size: 18px; }
      p.class3 { font-size: x-small; }
    </style>
  </head>

  <body>
    <p>Изменение размера с помощью процентов.</p>
    <p>Изменение размера с помощью пикселей.</p>
    <p>Изменение размера с помощью ключевого слова x-small.</p>
  </body>
</html>

Попробовать »

С этой темой смотрят:

Отступ текста в CSS

Выравнивание текста в CSS

Цвет и тень текста в CSS

Как изменить шрифт в CSS

Стандартные (безопасные) шрифты

CSS Font-Size: руководство по изменению размера текста в CSS

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

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

CSS

размер шрифта
Свойство позволяет разработчикам устанавливать размер шрифта в абзаце или строке текста на веб-странице.

Найдите свой матч для буткемпа

Career Karma подберет для вас лучшие учебные курсы по технологиям
Получите доступ к эксклюзивным стипендиям и подготовительным курсам

Выберите свой интерес

Программная инженерия

Дизайн

Наука о данных

Аналитика данных

Кибербезопасность

Имя

Фамилия

Электронное письмо

Телефонный номер

Продолжая, вы соглашаетесь с нашими

условия обслуживания

Политика конфиденциальности

, и вы соглашаетесь получать предложения и возможности от Career Karma по телефону, текстовым сообщениям и электронной почте.

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

CSS

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

Правильный стиль шрифта — важная часть веб-дизайна. Нестилизованный текст вызывает у посетителей затруднения при чтении, что почти наверняка приводит к неприятному опыту работы с сайтом.

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

вес шрифта

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

украшение текста

, и

цвет

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

Синтаксис для CSS
размер шрифта
собственность:

 размер шрифта: sizeValue;

размерзначение
размер шрифта, который вы хотите использовать для блока текста. Существует несколько способов указать размер шрифта, используемого блоком текста. Методы, которые мы собираемся обсудить в этой статье:

пикселей
Эм
корень
единицы области просмотра
ключевые слова

Давайте рассмотрим пример того, как использовать каждый подход к размеру шрифта на веб-странице.

Установите размер шрифта, используя пиксели

Один из наиболее распространенных способов установить размер шрифта — использовать пиксели.

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

Однако использование пикселей для установки размера шрифта в текстовом блоке имеет одно ограничение: доступность. Размеры шрифтов, определенные с помощью пикселей, недоступны, поскольку некоторые браузеры не позволяют пользователям настраивать размер шрифта. Пользователи с нарушениями зрения, например, могут столкнуться с трудностями при использовании сайта, использующего пиксели для определения размера шрифта.

Допустим, мы создаем веб-сайт с размером шрифта
28 пикселей
для всех

элементы и
12 пикселей
для всех

элементы. Мы могли бы использовать следующий код для выполнения этой задачи:

 h2 { размер шрифта: 28 пикселей; }
р (размер шрифта: 12 пикселей; }

В нашем коде мы использовали

Селектор CSS

установить размер шрифта для всех

элементы для
28 пикселей
и все

элементы для
12 пикселей
. Следующий фрагмент показывает, как эти элементы выглядят с нашими новыми размерами шрифта:

«Карьерная карма вошла в мою жизнь, когда я больше всего в ней нуждалась, и быстро помогла мне пройти буткемп. Через два месяца после выпуска я нашла работу своей мечты, которая соответствовала моим ценностям и целям в жизни!»

Венера, инженер-программист в Rockbot

 <стиль>
  h2 {размер шрифта: 28px; }
  р {размер шрифта: 12px; }


  Это заголовок.
 
  Это абзац текста.

Нажмите на

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

Установить размер шрифта с помощью ems

Другой распространенный способ установить размер шрифта в CSS — использовать размеры em. Единица измерения em относится к размеру шрифта родительского элемента. Если вы установите размер шрифта на
2эм
, размер шрифта будет в два раза больше, чем у родительского элемента.

Пример размера шрифта CSS с помощью ems

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

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

Предположим, что размер шрифта нашей веб-страницы
16 пикселей
. Мы хотим, чтобы все абзацы текста отображались с использованием этого размера шрифта, что означает, что мы должны использовать значение
1эм
. Кроме того, мы хотим, чтобы все наши заголовки отображались с размером шрифта
24px
, что равно
1.5эм
.

Мы могли бы использовать следующий код для выполнения этой задачи:

 p { размер шрифта: 1em; }
h2 {размер шрифта: 1.5em; }

В нашем коде размер всех абзацев будет
16 пикселей
(
1эм
знак равно
16 пикселей
по умолчанию) и все

элементы будут
24px
(
1. 5эм
знак равно
24px
).

Вот как наш текст будет выглядеть на веб-странице:

 <стиль>
  p {размер шрифта: 1em; }
  h2 {размер шрифта: 1.5em; }


  Это заголовок.
  Это абзац текста.

В приведенном выше примере вы можете увидеть новые стили для нашего

элементы.

Следует отметить, что если наш

появился в поле с другим размером шрифта, размером нашего

изменилось бы. Это связано с тем, что значения em наследуют размер шрифта своих родителей.

Установите размер шрифта, используя Root em

Сокращение от корня em,
бэр
— это новая единица измерения, представленная в CSS3, которую можно использовать для установки размера шрифта. Используемые значения
бэр
относятся к корню

элемент вместо родительского элемента.

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

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

s появиться в
24px
и все абзацы должны появиться в
16 пикселей
. Мы могли бы установить эти размеры шрифта, используя следующий код:

 <стиль>
  p {размер шрифта: 1rem; }
  h2 {размер шрифта: 1.5rem; }


  Это заголовок.
  Это абзац текста.

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

Установите размер шрифта с помощью ключевых слов

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

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

хх-маленький
(9 пикселей)
х-маленький
(10 пикселей)
небольшой
(13 пикселей)
Средняя
(16 пикселей)
большой
(18 пикселей)
х-большой
(24px)
xx-большой
(32px)

Значения, указанные в скобках, основаны на браузере, размер шрифта по умолчанию которого
16 пикселей
.

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

Предположим, мы хотим установить размер всех

элементы на странице для
24px
(x-большой) и все

элементы для
18 пикселей
(большой). Мы могли бы сделать это, используя этот код:

 <стиль>
  h3 {размер шрифта: x-большой; }
  h4 {размер шрифта: большой; }


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

Нажмите на

в редакторе кода выше, чтобы увидеть вывод нашего кода HTML/CSS.

Размер шрифта для нашего

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

Установите размер шрифта с помощью единиц измерения окна просмотра

Единицы области просмотра рассчитываются как процент от размера области просмотра браузера. Две единицы области просмотра, поддерживаемые CSS: высота просмотра (
вх
) и ширина просмотра (
оч
).

Поскольку единицы области просмотра представляют собой процент от размера области просмотра браузера,
1вх
например, равен 1% высоты области просмотра. Итак, если у вас есть окно просмотра шириной 1000 пикселей,
1вх
равно 10px.

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

Предположим, мы хотим создать сайт, заголовки которого составляют 4% ширины области просмотра, а абзацы — 1% ширины области просмотра. Мы могли бы сделать это, используя этот код:

 <стиль>
  p {размер шрифта: 1vw; }
  h2 {размер шрифта: 4vw; }


  Это заголовок.
  Это абзац текста.

Нажмите на

в редакторе кода выше, чтобы увидеть вывод нашего кода HTML/CSS.

Если вы измените размер браузера, размер этих заголовков изменится.

Заключение

Свойство font-size используется в CSS (и, следовательно, в HTML) для изменения размера шрифтов. Он принимает ряд единиц измерения, в которых могут отображаться размеры шрифта, включая пиксели, em, rem, ключевые слова и единицы области просмотра. Его можно применять к

CSS-классы и идентификаторы

, так и к самим элементам.

В этом руководстве были рассмотрены основы размера шрифта CSS. Теперь вы готовы начать использовать атрибут размера шрифта как эксперт.

Как изменить размер шрифта в CSS

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

Размер ваших шрифтов привлекает внимание читателя и устанавливает визуальную иерархию. Вы заметите, что в этом сообщении в блоге заголовок (

) имеет самый большой размер шрифта. Далее элементы заголовка (

) уменьшаются в размерах, пока мы не достигнем

элементов под ними.

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

В этом посте мы покажем вам, как использовать свойство CSS font-size , в том числе:

с использованием единицы абсолютного размера
с использованием единицы относительного размера
с использованием значения длины (например, пикселей, бэров или бэров)
с использованием процентного значения
с использованием единиц vw для настройки размера шрифта

Как изменить размер шрифта в CSS

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

См. размер шрифта Pen: разные значения от HubSpot (@hubspot) на CodePen.

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

Ключевое слово абсолютного размера

элемент {размер шрифта: маленький; }

Ключевые слова абсолютного размера основаны на размере шрифта по умолчанию. Чаще всего размер шрифта по умолчанию — средний (что соответствует 16 пикселям или 1 em), хотя он может отличаться в зависимости от браузера и семейства шрифтов. Обратите внимание, что в HTML размер шрифта по умолчанию составляет 16 пикселей.

Ключевые слова абсолютного размера:

xx-small
x-маленький
маленький
средний
большой
большой
xx-большой
xxx-большой

Вот как каждый из них выглядит в браузере:

6221923828125″ data-theme-id=»39533″ data-default-tab=»css,result» data-slug-hash=»OJpxgRw» data-editable=»true» data-user=»hubspot»> См. размер шрифта Pen: абсолютный размер от HubSpot (@hubspot) на CodePen.

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

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

Ключевое слово относительного размера

элемент {размер шрифта: больше; }

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

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

См. Размер шрифта пера: относительный размер от HubSpot (@hubspot) на CodePen.

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

Длина

Существует несколько значений длины, которые можно присвоить свойству font-size . Здесь мы сосредоточимся на трех наиболее распространенных: пикселях, единицах em и единицах rem.

пикселей

элемент {размер шрифта: 32px; }

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

См. Pen font-size: px от HubSpot (@hubspot) на CodePen.

Однако фиксированный характер пикселей также является недостатком. Они не оптимизированы для всех устройств — CSS-Tricks обнаружил, что веб-сайты на iPad mini отображаются так же, как веб-сайты на iPad, например, — и они не являются доступным значением длины.

Поскольку в некоторых браузерах пользователи не могут изменить размер шрифта, вы можете использовать более инклюзивные и гибкие параметры, например em и rem . Мы обсудим их далее.

Эмс

элемент {размер шрифта: 2em; }

Модуль em устанавливает размер шрифта относительно размера шрифта родительского элемента. Таким образом, присвоив тексту размер шрифта из 2em , этот текст будет в два раза больше окружающего его текста.

Установка размера шрифта в единицах em идеально подходит для инклюзивного дизайна. Поскольку em — это относительная единица, пользователи могут настраивать размер текста во всех браузерах.

Единственным недостатком является то, что ems компаунд. Итак, скажем, элемент с размером шрифта 2em содержит еще один элемент . Вложенный элемент будет в два раза больше, или 4em . См. код ниже.

См. Размер шрифта Pen: em от HubSpot (@hubspot) на CodePen.

К счастью, модуль rem решает эту проблему смешивания.

Ремс

элемент {размер шрифта: 2rem; }

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

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

, похожего на упомянутый в примере выше. Давайте посмотрим на код для этого ниже.

См. Размер шрифта Pen: rem от HubSpot (@hubspot) на CodePen.

Обратите внимание, как вложенные 9Элемент 0328 имеет тот же размер шрифта, что и другой элемент .

Для получения дополнительных рекомендаций о том, когда следует использовать единицу px или единицу измерения rem, посмотрите это полезное поясняющее видео:

Процент

элемент { размер шрифта: 110%; }

Процентное значение задает размер шрифта элемента относительно размера шрифта родительского элемента.

Произнесите элемент

, для которого установлено значение 36px содержит два элемента

. Для размера шрифта первого абзаца установлено значение 50% , а для второго абзаца установлено значение 200% . Первый элемент

будет иметь размер 18 пикселей, а второй — 27 пикселей. Вот как этот код выглядит в действии:

См. размер шрифта Pen: процент от HubSpot (@hubspot) на CodePen.

Адаптивный текст

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

элемент {размер шрифта: 10vw; }

Единица vw — еще одна относительная единица. Однако это относится не к родительскому элементу или корневому элементу, а к ширине области просмотра. Если быть точным, 1 vw равен 1% области просмотра. Это означает, что если окно просмотра имеет ширину 100 пикселей, 1vw равно 1 пикселю.

Скажем, я хочу, чтобы размер шрифта моего абзаца составлял 10% от ширины окна браузера. Вот как выглядит код:

См. размер шрифта Pen: vw от HubSpot (@hubspot) на CodePen.

А вот как выглядит текст при изменении размера окна просмотра:

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

При установке размера шрифта в единицах vm следите за тем, чтобы текст не становился слишком большим на больших экранах. К сожалению, в CSS нет свойства «максимальный размер шрифта», но вы можете предотвратить слишком большой размер шрифта, используя медиа-запросы.

Вам просто нужно использовать медиа-запрос на определенной контрольной точке размера экрана и вернуть размер шрифта к установленному значению в пикселях. Скажем, я хочу вернуть размер шрифта к 30px , когда область просмотра превышает 1000px . Вот как выглядит код:

См. размер шрифта Pen: vw с медиа-запросом от HubSpot (@hubspot) на CodePen.

А вот как выглядит текст при изменении размера области просмотра:

Управление размером шрифта

Изменение размера шрифта в CSS является сложной задачей по сравнению с простотой изменения размера шрифта в Google Docs или Microsoft Word, но это возможно. быть освоен с некоторой практикой в HTML и CSS.

This entry was posted in Популярное

Posted:

Comments: