Как указать размер шрифта в html: Как изменить размер текста в html

 .контейнер {
  размер шрифта: 16px;
}

п {
  размер шрифта: 1em;
}

h3 {
  размер шрифта: 2em;
} 

В приведенном выше примере абзац будет иметь размер шрифта 16 пикселей, потому что 1 x 16 = 16 пикселей, тогда как заголовок будет иметь размер 32 пикселя, потому что 2 x 16 = 32 пикселя. Есть много преимуществ масштабирования шрифта в зависимости от размера шрифта родительского элемента, а именно, мы можем обернуть элементы внутри контейнера и знать, что все дочерние элементы всегда будут относительно друг друга:

See the Pen Выяснение того, как работает единица em, с помощью CSS-Tricks (@css-tricks) на CodePen.

Единица rem

Однако в случае единиц rem размер шрифта зависит от значения корневого элемента (или элемента html ).

 HTML {
  размер шрифта: 16px;
}

п {
  размер шрифта: 1.5rem;
} 

В приведенном выше примере единица измерения rem равна 16 пикселям (поскольку она унаследована от элемента html /root), поэтому размер шрифта для всех элементов абзаца будет равен 24 пикселям (1,5 x 16 = 24). В отличие от единиц em, абзац будет игнорировать стиль всех своих родителей, кроме корня.

Данное устройство поддерживается следующими браузерами:

Бывший блок

 .элемент {
  размер шрифта: 20ex;
} 

Для единиц ex 1ex будет равно вычисленной высоте строчной буквы x корневого элемента. Итак, в примере ниже 9Для элемента 0005 html установлено значение 20px , а все остальные размеры шрифта определяются высотой x этого конкретного шрифта.

See the Pen Выяснение того, как работает модуль ex, с помощью CSS-Tricks (@css-tricks) на CodePen.

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

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

 .element-one {
  размер шрифта: 100vh;
}

.элемент-два {
  размер шрифта: 100vw;
} 

Единицы области просмотра, такие как vw и vh , устанавливают размер шрифта элемента относительно размеров области просмотра:

• 1vw = 1% ширины области просмотра
• 1vh = 1% высоты области просмотра

Итак, если мы возьмем следующий пример:

 .element {
  размер шрифта: 100vh;
} 

Тогда это будет означать, что размер шрифта элемента всегда должен составлять 100% от высоты окна просмотра (50vh будет 50%, 15vh будет 15% и т. д.). В приведенной ниже демонстрации попробуйте изменить высоту примера, чтобы увидеть растяжку шрифта:

См. тип Pen Sizing с единицами vh от CSS-Tricks (@css-tricks) на CodePen.

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

См. размер пера введите с помощью единиц vw CSS-Tricks (@css-tricks) на CodePen.

Эти устройства поддерживаются следующими браузерами:

Chrome	Сафари	Firefox	Опера	ИЭ	Андроид	iOS
31+	7+	31+	27+	9+	4. 4+	7.1+

Важно отметить, что есть еще две единицы измерения окна просмотра: vmin и vmax . Первый найдет значения vh и vw и установит размер шрифта как наименьший из двух, в то время как vmax устанавливает размер шрифта на наибольшее из этих двух значений.

Блок ch

 .element {
  размер шрифта: 24ch;
} 

Блок ch аналогичен блоку ex в том, что он устанавливает размер шрифта элемента в зависимости от ширины 0 (нулевого) глифа шрифта:

См. Размер пера введите с единицами измерения ch с помощью CSS-Tricks (@css-tricks) на CodePen.

Данное устройство поддерживается:

Связанные свойства

• шрифт
• семейство шрифтов
• шрифт-растяжка
• стиль шрифта
• вариант шрифта
• вес шрифта

Другие ресурсы

• размер шрифта на W3C
Размер шрифта
• на MDN
• Идея размера шрифта: px в корне, rem для компонентов, em для текстовых элементов
• Длина CSS
• Почему Эмс?
• Типографика размером с область просмотра
• Точный контроль над отзывчивой типографикой

Почему никогда не следует использовать px для установки размера шрифта в CSS

Опубликовано: 28 октября 2022 г.
Обновлено: 11 ноября 2022 г.

Простите кликбейтный заголовок; «никогда» — сильно сказано, но это важная и плохо изученная тема.

В сфере веб-разработки бытует довольно много заблуждений, которые сохраняются независимо от того, как часто их развенчивают. «Внешние ссылки всегда должны открываться в новых вкладках» — хороший пример. CSS Tricks довольно подробно рассмотрели это здесь почти десять лет назад (tl; dr: в основном неверно), но, похоже, в некоторых уголках он все еще сохраняется.

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

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

Еще раз: «всегда» — сильно сказано и немного догматично. Но правда в том, что если вы выберете неправильную единицу измерения, вы рискуете переопределить предпочтения ваших пользователей, что затруднит (возможно, даже сделает невозможным) использование ими вашего веб-сайта, и потенциально могут нанести вред дизайну с непреднамеренными визуальными побочными эффектами.

О каких юнитах идет речь и что они делают?

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

пикселей — это сокращение от пикселя… хотя в большинстве случаев это уже не буквально пиксель. Это раньше был , когда дисплеи имели довольно предсказуемое соотношение пикселей с низким разрешением, например 1024×768. В те дни 1px обычно равнялись одному фактическому пикселю на физическом экране.

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

Однако, когда появились экраны с высоким разрешением (иногда называемые «ретина»), и устройства начали упаковывать больше пикселей в меньшее пространство, эти физические пиксели устройства стали сверхмалыми . Просматривая веб-страницы на экране с высоким разрешением, было бы крайне сложно что-либо прочитать, если бы 1px в CSS по-прежнему соответствовало одному буквальному пикселю устройства, поскольку сами пиксели быстро уменьшались. В конце концов, современные смартфоны имеют разрешение даже выше, чем HD-телевизоры.

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

Итак, в наши дни 1px обычно соответствует размеру увеличенного, «увеличенного» пикселя, а не буквального пикселя на реальном оборудовании. Что-то, что 1px в нашем CSS, вероятно, займет несколько физических аппаратных пикселей, и у нас нет никакого способа в чистом CSS указать буквальный пиксель устройства. Но это нормально, потому что они, как правило, слишком малы, чтобы мы могли с ними связываться.

Пример: пиксели на iPhone 14 Pro настолько микроскопичны, что 16 пикселей в буквальных пикселях устройства будут примерно размером печатного шрифта при размере шрифта 2pt. Хорошо, что браузеры масштабируют их для нас!

Большая часть этого не очень важна в контексте этого обсуждения, но я думаю, что все равно полезно знать. Важная часть: 1px равно тому, что браузер считает одним пикселем (даже если это не буквально пиксель на аппаратном экране).

Это приводит нас к em и rem , которые похожи друг на друга. Чтобы продолжить , не совсем релевантные, но все же интересные мелочи : «em» — это типографский термин, который фактически появился на много десятилетий раньше компьютеров. Типографически один em равен текущему размеру шрифта.

Если у вас установлен размер шрифта 32pt («pt» — это пунктов , еще один старый типографский термин, который все еще иногда используется), то 1em — 32pt. Если текущий размер шрифта 20px , то 1em = 20px (но опять же : вы не должны устанавливать размеры шрифта в пикселях — это просто для примера ).

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

Em первоначально относился к ширине символа «M», откуда и произошло название. Но теперь это относится к текущему размеру шрифта, а не к размерам конкретного глифа.

Разница между

Чтобы различать их: 1rem всегда равен размеру шрифта браузера или, точнее, размеру шрифта элемента html . rem означает «root em», а корнем веб-страницы является тег . Итак, 1rem = любой размер шрифта документа. (Что, опять же, по умолчанию равно 16px , но может быть переопределено пользователем.)

em , с другой стороны, это размер шрифта текущего элемента . Возьмите следующий CSS:

  .контейнер {
  размер шрифта: 200%;
}
п {
  размер шрифта: 1em;
}  

Учитывая приведенный выше CSS, параграфы внутри элемент .container будет в два раза больше. Это потому, что 1em означает «текущий размер шрифта», а внутри . container это 200%. 1em × 200% = 2em ( 32px по умолчанию).

Параграфы вне элемента .container , тем не менее, по-прежнему будут иметь нормальный размер шрифта 1em ( 16px по умолчанию).

Если мы изменили em на rem в приведенном выше CSS, то все тегов абзаца всегда будут размером в браузере по умолчанию, независимо от того, где они находятся.

размер шрифта: 1em эквивалентно размер шрифта: 100% .

em и % единицы не всегда эквивалентны в других контекстах; например, ширина : 1em и ширина : 100% , скорее всего, будут очень разными, поскольку в этом случае процент основан на ширине родительского контейнера, а не на размере его шрифта. Но % и em одинаковы в том, что касается свойства font-size .

Итак, подытожим:

• 1em размер шрифта текущего элемента
• 1rem (root em) — размер шрифта документа (т. е. браузера)

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

Почему все это имеет значение

Опять же, распространенное заблуждение: поскольку 1em равно 16px , в любом случае не имеет значения, какую единицу измерения вы выберете. И что кажется логичным ; если 16px = 1rem , то какое значение имеет способ ввода?

Помните, em и rem являются относительными ; по умолчанию они оба (в конечном счете) основаны на размере шрифта браузера.

px , однако, это не так; это просто статическое значение, которое не основано ни на чем другом и не зависит от него.

2rem — удвоенный размер шрифта браузера; 0. 5rem это половина и так далее. Поэтому, когда или если пользователь изменит свой предпочтительный размер шрифта, если вы используете em и rem , весь текст на вашем сайте соответственно изменится, как и должно быть. 2rem по-прежнему вдвое больше размера шрифта; 0.5рем это еще половина.

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

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

em и rem работают с размером шрифта пользователя;  пикс.  полностью переопределяет его.

Это очень плохо. Он недоступен и может даже помешать кому-то вообще использовать сайт.

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

Это также очень веская причина избегать единиц измерения области просмотра, таких как vw или vh , при установке размера шрифта. Они также статичны и не могут быть изменены пользователем.

При больше всего может быть приемлемым значение вроде calc(1rem + 1vw) , поскольку оно все еще содержит rem в качестве базы. Однако даже в этом случае я бы рекомендовал использовать clip() или медиа-запросы, чтобы установить минимальное и максимальное значения, поскольку размеры экрана часто выходят далеко за рамки того, что мы могли бы ожидать или тестировать.

Различия помимо размера шрифта

Хорошо, теперь давайте поговорим о том, как px и em / rem различаются, даже если мы , а не , имея дело конкретно со свойством font-size .

Разработчики обычно тестируют, увеличивая или уменьшая масштаб страницы, и я думаю, что именно отсюда происходит неправильное представление, лежащее в основе этого поста. При масштабировании все увеличивается (или уменьшается), и в этом случае выбор из px или em / rem в качестве единицы CSS обычно не имеет значения. Оба ведут себя одинаково, что касается масштабирования. И большинство разработчиков с хорошим зрением, вероятно, не поймут, что это еще не все. Однако хитрая штука:

Даже за пределами font-size , px не ведет себя так же, как em и rem .

px единиц по-прежнему привязаны к масштабированному значению пикселей на экране. 9Однако 0005 em и rem привязаны к размеру шрифта документа, а , а не к масштабу или масштабу страницы.

Для демонстрации взгляните на этот CodePen:

См. «Перо без названия» Джоша Коллинсворта (@collinsworth) на КодПене.

У нас есть несколько абзацев, каждый с границей 2px внизу и полем 20px между ними. Обратите внимание, мы используем пикселей единиц для обоих.

При увеличении или уменьшении масштаба размер и расстояние между элементами остаются относительными . То есть: чем больше вы увеличиваете масштаб, тем толще становится эта линия и тем больше становится расстояние между абзацами.

Чтобы избавить вас от хлопот, вот скриншот, показывающий то же перо с увеличением 400%. Текст, строка и интервал все в 4 раза больше; они остаются одинакового размера относительно друг друга:

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

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

На снимке экрана ниже я установил размер шрифта Firefox по умолчанию на 64px . Посмотрите:

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

Однако вы заметите, что если вы измените px в CSS на эквивалентные значения rem , линии и интервал сделают больше!

Все это означает, что есть важные, реалистичные причины для выбора px на em и rem или наоборот.

Подведем итог:

• пикселей значения делают не масштабируются вверх или вниз, когда пользователь меняет размер шрифта
• em и rem значения сделать настроить пропорционально размеру шрифта

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

See the Pen Разница между px и rem в масштабировании шрифта Джош Коллинсворт (@collinsworth) на КодПене.

Что выбрать

Итак, зная, что em и rem будут масштабироваться в зависимости от размера шрифта, но значения px будут , а не , что это нам дает? Должны ли мы просто никогда не использовать пикселей для что-нибудь !?

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

Поскольку мы знаем, что значения px не изменятся, когда и если пользователь изменит размер шрифта, это означает, что единицы пикселей на самом деле являются отличным выбором для некоторых эстетических элементов. Может быть, у нас есть определенный интервал, и мы бы не хотели, чтобы 90 378 90 379 становилось больше, когда размер шрифта больше. (Если по умолчанию это большой блок отрицательного пространства, возможно, не имеет смысла позволять ему масштабироваться до еще более массивного размера.)

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

Лично я: Я бы рекомендовал ставить все размеры с помощью rem . Я добавляю em только там, где хочу, чтобы что-то было пропорционально текущему размеру шрифта (например, значок рядом с текстом, высота которого должна быть точно такой же, как у символов, и половина символа сбоку). Я бы нигде не использовал px , кроме элементов дизайна, которые я явно не хотел масштабировать с размером шрифта.

Но еще раз, если вы что-то уберете из этого поста:

Никогда не устанавливайте font-size в пикселей единиц — по крайней мере, если вы не уверены в том, что делаете, как он будет себя вести и будет ли он по-прежнему доступен, когда вы это сделаете.

Важное примечание о медиа-запросах

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

  @media (минимальная ширина: 800 пикселей) {
  /* Изменение размера шрифта НЕ влияет на эту точку останова */
}
@media (минимальная ширина: 50 бэр) {
  /* Изменение размера шрифта ДЕЙСТВИТЕЛЬНО влияет на эту точку останова */
}  

Это связано с тем, что по мере увеличения размера шрифта 50rem становится другим значением в зависимости от этого предпочтения, а 800px — нет.

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

Я столкнулся с этой проблемой на этом же сайте; Я устанавливал все свои контрольные точки на px . Однако, когда я увеличил размер шрифта по умолчанию, мои медиа-запросы не отвечали, поскольку они по-прежнему рассматривали только ширину экрана в пикселях. Так что у меня все еще была крошечная боковая панель с огромным текстом, неразборчиво разбитым внутри нее, так как я не учитывал предпочтения пользователя. я поменял на rem сразу после этого, и это решило проблему.

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

Последнее слово о доступности