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

Leave a Comment / Html / By /

Содержание

html — Задать размер шрифта на веб-странице такого же размера как в Word

Вопрос задан

Изменён 1 год 8 месяцев назад

Просмотрен 847 раз

Есть некоторый веб-сервис, генерирующий при помощи WkHtmlToPdf PDF файл из html-страницы.

Одно из требований к документу (а это некоторый формуляр, утверждённый госорганом), чтобы документ выглядел так же, как и распечатка из MS Word.

И вот тут я упёрся в одну проблему. Документ набран 12тым шрифтом, я на автопилоте написал:

<html>
<head>
    <meta charset="utf-8" />
    <style>
body {
    font-family: "Times New Roman", serif;
    font-size: 12pt;
}
    </style>
</head>
<body>
<!-- page 1 -->
<p>УТВЕРЖДЕН</p>
. ..
<div>&nbsp;</div>
<!-- page 2 -->

И… споткнулся о то, что размер шрифта при распечатке не соответствует размеру шрифта, распечатанного из Ms Word.

В принципе, можно попробовать подобрать за несколько итераций поменял — распечатал — сравнил некий магический коэффициент, но вообще – как решать такую проблему правильно?

  • html
  • css
  • вёрстка
10

font-size: 12pt; — Вам использовать ни в коем случаи нельзя. Поскольку данная величина зависит от плотностей пикселей, а она у разных браузерах разная (Считается по разному для Хрома и Сафари так точно ). Поэтому смотрите в сторону px em rem

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

seodon.ru | Учебник HTML — Как изменить шрифт?

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

Изменение стилей шрифтов

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

<B>…</B> и <STRONG>…</STRONG> — выделяют текст

полужирным шрифтом.

<I>…</I> и <EM>…</EM> — выделяют текст курсивом.

<SUP>…</SUP> — выводит текст в верхнем индексе, например E = mc2.

<SUB>…</SUB> — выводит текст в нижнем индексе, например H2SO4.

Все эти теги являются встроенными (inline, уровня строки), то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше — должен быть закрыт позже.

Думаю, вы заметили, что для выделения жирным и курсивом существует по два тега. Дело в том, что обычные браузеры отображают содержимое этих тегов одинаково, а вот невизуальные (голосовые) браузеры могут по особенному акцентировать текст внутри <STRONG> и <EM>. Поэтому, если вы хотите выделить какие-то слова или фразы, чтобы привлечь читателя, то лучше использовать именно эти теги, хотя, по большому счету, разницы нет.

Вы спросите: «Но неужели указанные выше теги — это все, чем можно выделить текст в HTML»? Ну конечно же нет! Существуют еще теги <S> и <STRIKE>, подчеркивающие текст, а также тег <U>, отображающий зачеркнутый текст. Но, видите ли, эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Поэтому я вам покажу другой способ, который вы можете использовать без опаски. А заключается он в применении атрибута style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:

<тег>…</тег> — подчеркивает текст.

<тег>…</тег> — надчеркивает текст.

<тег>…</тег> — зачеркивает текст.

Пример изменения стилей шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение стилей шрифтов</title>
</head>
<body>
<p><b>Жирный шрифт. </b> <i>Курсив.</i></p>
<p><b><i>Жирный курсив.</i></b></p>
<p><em>H<sub>2</sub>SO<sub>4</sub></em> - формула серной кислоты написанная курсивом.</p>
<p>Подчеркнутый параграф текста.</p>
<p>Обычный текст,
   <strong>зачеркнутый жирный.</strong>
</p>
</body>
</html>

Результат в браузере

Жирный шрифт. Курсив.

Жирный курсив.

H2SO4 — формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст, зачеркнутый жирный.

Теперь хотелось бы сделать одно пояснение по поводу атрибута style. Style — это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CSS). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т. д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. Поэтому, чтобы не забивать вам голову ненужной информацией, в данном учебнике я тоже заменил их стилями, то есть атрибутом style. Его общий синтаксис следующий:

<тег>…</тег>

Используя style вы совершенно ничего не потеряете, но зато научитесь писать грамотный HTML, а в качестве бонуса еще и CSS немного освоите.

Тег <SPAN> или что делать, когда нет нужных тегов

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

Итак, знакомьтесь — <SPAN>…</SPAN>. Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе <SPAN>, без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у <SPAN> появляются те или иные свойства. Вот так, а теперь изучаем пример.

Пример использования тега SPAN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Использование тега SPAN</title>
</head>
<body>
<p><span>Обычный текст без изменений.</span></p>
<p>Еще обычный текст.
 <span>Подчеркнутый.</span>
 <span>Зачеркнутый.</span>
</p>
</body>
</html>

Результат в браузере

Обычный текст без изменений.

Еще обычный текст. Подчеркнутый. Зачеркнутый.

Меняем имя (гарнитуру) шрифта

Не знаете что такое имя шрифта? Наверняка многие из вас хоть когда-то набивали текст в Microsoft Word или OpenOffice Writer и видели такое меню:

Меню выбора шрифта в Microsoft Word.

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

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

ШрифтыСемейство
‘Comic Sans MS’cursive (рукописные)
Courier monospace (моноширинные)
Arial, Helvetica, Verdana, Tahomasans-serif (рубленные, гротески)
Times, ‘Times New Roman’, Garamondserif (с засечками, антиква)

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

<тег>…</тег>

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

Чтобы изменить шрифт на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для отдельной части текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения имени шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение имени шрифтов</title>
</head>
<body>
 <p>Это шрифт Arial, если его нет, то Verdana, а если
    и его нет, то любой другой из sans-serif. 
 </p>
 <p>
    Это Comic Sans MS или любой cursive.
 </p>
 <p>Это опять Arial, Verdana или любой sans-serif.
    <span>
      А это Courier или любой monospace.
    </span>
 </p>
</body>
</html>

Результат в браузере

Это шрифт Arial, если его нет, то Verdana, а если и его нет, то любой другой из sans-serif.

Это Comic Sans MS или любой cursive.

Это опять Arial, Verdana или любой sans-serif. А это Courier или любой monospace.

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

Меняем размер шрифта

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных — это пункты (pt), пиксели (px) и проценты (%). Итак:

  • pt — Пункты. Один пункт равен 1/72 дюйма, а один дюйм — 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.
  • px — Пиксели. Измеряется в пикселях монитора компьютера. Пиксель — это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.
  • % — Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

<тег>…</тег>

Как и в случае с именами шрифтов, чтобы изменить размер шрифта на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить шрифт для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения размера шрифтов

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>Изменение размера шрифта</title>
</head>
<body>
 <p>Этот размер шрифта составляет 90% от размера
    в браузере по умолчанию.
 </p>
 <p>
    Этот размер составляет 90% уже от размера в теге BODY.
 </p>
 <h5>
  Размер шрифта заголовка составляет 120% от размера в BODY. 
 </h5>
 
 <p>Это опять 90% от размера в браузере по умолчанию.
    <span>
      Размер этого шрифта 15 пунктов.
    </span>
 </p>
</body>
</html>

Результат в браузере

Этот размер шрифта составляет 90% от размера в браузере по умолчанию.

Этот размер составляет 90% уже от размера в BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию. Размер этого шрифта 15 пунктов.

Размер шрифта зависит не только от его явного указания, но и от его имени (гарнитуры) — разные шрифты могут иметь совершенно разные высоту и ширину букв, а также межбуквенное расстояние.

Еще немного об атрибуте style

Самое время раскрыть вам еще один секрет этого чудесного атрибута, но опять сначала задам вам вопрос. Как бы вы поступили, если бы вам надо было установить для всего параграфа имя шрифта Arial с размером в 80%? А я вам скажу, вы бы написали что-то подобное:

Так.

<p>
 <span>
  Текст параграфа.
 </span>
</p>

Вот так.

<p>
 <span>
  <span>
   Текст параграфа.
  </span>
 </span>
</p>

Или вообще вот так.

<p>
   Текст параграфа.
</p>

Я прав? Ну что ж, если первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style — не просто атрибут, а атрибут относящийся к CSS. Посмотрите-ка на это:

<p>
   Текст параграфа.
</p>

Гораздо проще, да? Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (» «), иначе применится только первый стиль, а остальные браузер проигнорирует. Ну мы ведь всегда с вами проставляем двойные кавычки, правда?

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

Домашнее задание.

  1. Создайте заголовок статьи и двух ее разделов, но заголовки разделов еще и подчеркните.
  2. Сделайте так, чтобы при наведении курсора мыши на заголовок статьи появлялась соответствующая надпись.
  3. Напишите один параграф в начале статьи и по два в каждом разделе.
  4. Установите для всей страницы шрифт Arial с размером 90% от размера в браузере по умолчанию.
  5. Установите для всех заголовков шрифт Times и пусть заголовок статьи будет с размером шрифта в 150%, а подзаголовки — 120%.
  6. Выделите в первом параграфе два слова жирным шрифтом и одно курсивом. Во втором — фразу из нескольких слов жирным курсивом. В третьем — подчеркните фразу выделенную курсивом. В четвертом — зачеркните половину фразы выделенной жирным.
  7. Напишите в последнем параграфе формулу спирта: C2H5OH.

Посмотреть результат → Посмотреть ответ

Параграфы и заголовки← Содержание →Меняем цвет текста и фона

Как изменить размер шрифта в WordPress (используя 2 метода)

Вордпресс Расширенный

29 мая 2023 г.

Ричард Б.

4 минуты Чтение

Изменить размер шрифта в WordPress очень просто. В этой статье вы узнаете все, что вам нужно знать. Мы рассмотрим два метода — установка плагина и использование CSS.

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

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

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

Изменение размера шрифта с помощью расширенного плагина TinyMCE

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

Во-первых, вам необходимо установить и активировать плагин. Затем вы можете перейти на страницу настроек . Вы найдете две вкладки: Редактор блоков (Gutenberg) и Классический редактор (TinyMCE) .

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

Вот шаги по изменению шрифта с помощью этого плагина:

1. Создайте новый пост или отредактируйте существующий. Вы увидите классический редактор абзацев.

2. Выделите строки текста, которые вы хотите изменить, затем выберите размер шрифта.

3. Результат будет выглядеть так:

Классический способ с использованием CSS

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

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

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

1. Перейдите на панель управления WordPress, затем Внешний вид > Настроить .

2. Выберите Дополнительный CSS в WordPress.

Вы можете добавить строки кода в поле слева.

1. Чтобы изменить весь шрифт: body { font-size: 1.25rem; }

2. Чтобы изменить шрифт абзацев: p { font-size: 25px; }

3. Чтобы изменить шрифты определенных заголовков: h3 { font-size: 2.5em; }

4. Чтобы изменить размер шрифта боковой панели: .sidebar li { font-size: 12px; }

5. Чтобы настроить шрифт нижнего колонтитула: .footer { размер шрифта: 150%; }

6. Чтобы изменить шрифт для определенных размеров экрана: html { font-size: 18px; } @media (минимальная ширина: 900 пикселей) { html { размер шрифта: 20 пикселей; } }

Стили CSS позволяют четырем различным единицам измерения размера текста:

  • Em (em) . Это единица, используемая в документах веб-медиа. 1em равен 12 очкам.
  • пикселей (пикселей) . Это единица, используемая в экранных медиа. 1px равен 1 точке на экране компьютера.
  • Точки (pt) . Этот блок предназначен для традиционных печатных СМИ. 1 пункт равен 1/72 дюйма.
  • Проценты (%) . По умолчанию установлено значение 100%, которое изменится после увеличения или уменьшения масштаба.

Использование редактора Gutenberg

Как упоминалось ранее, Gutenberg — это новое дополнение WordPress. Он интегрируется в CMS, чтобы упростить редактирование мультимедийных сообщений.

Заметным изменением является использование блоков . Блоки позволяют перетаскивать медиафайлы в свои сообщения, как и любой другой конструктор страниц.

Чтобы изменить размер шрифта с помощью редактора Gutenberg, выполните следующие простые шаги:

1. Выберите существующую публикацию для редактирования или создайте новую .

2. Щелкните трехточечное меню для доступа к настройкам Типографика , которые по умолчанию не отображаются.

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

4. Если вам нужен определенный размер, введите пользовательский размер шрифта в поле Size Custom . Вы можете выбрать между px , em или rem .

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

Заключение

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

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

Узнайте о других передовых технологиях WordPress

Как добавить пользовательский шрифт в WordPress
Как увеличить лимит памяти WordPress
Как удалить боковую панель в WordPress
Как изменить длину отрывка WordPress
Полное руководство по A/B-тестированию WordPress
Как скрыть заголовок страницы в WordPress

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

Вот некоторые из часто задаваемых вопросов о том, как изменить размер шрифта в WordPress.

Могу ли я изменить размер шрифта для определенных страниц или сообщений в WordPress?

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

Можно ли изменить размер шрифта для мобильных устройств в WordPress?

Можно изменить размер шрифта для мобильных устройств в WordPress, используя методы адаптивного дизайна и медиа-запросы в вашем CSS.

Какой размер шрифта по умолчанию в WordPress?

Размер шрифта по умолчанию в WordPress зависит от используемой вами темы. Обычно устанавливается на 16 пикселей, но может варьироваться. Вы можете проверить размер шрифта по умолчанию, просмотрев код или используя инструменты разработчика браузера.

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

Другие работы Ричарда Б. 

Почему никогда не следует использовать 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 пикселей в буквальных пикселях устройства будут примерно размером печатного шрифта с размером шрифта 2 pt. Хорошо, что браузеры масштабируют их для нас!

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

em и рем

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

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

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

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

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

Чтобы различать их: 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Однако 0212 em и rem привязаны к размеру шрифта документа , а , а не к масштабу или масштабу страницы.

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

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

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

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

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

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

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

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

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

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

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

Итак, подведем итог:

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

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

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

Что выбрать

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *