Html размер текста: Тег | htmlbook.ru - Блог сумасшедшего сисадмина

Размер текста | WebReference

Размер шрифта или, как он ещё называется в типографике — кегль, определяется высотой символов, которая, в свою очередь, на веб-странице может задаваться как в относительных (em, rem), так и в абсолютных единицах (дюймы (in), миллиметры (mm), пункты (pt) и др).

На вид шрифта влияет не только заданный размер, но и выбор гарнитуры. Шрифт Arial выглядит крупнее, чем шрифт Times того же размера, а шрифт Courier New чуть меньше шрифта Arial (рис. 1). Учитывайте эту особенность при выборе шрифта и его размеров.

Рис. 1. Размеры текста на веб-странице

На рис. 1 приведены три типа шрифтов с размером 12 и 24 пункта. Легко заметить, что при одинаковых заданных размерах текст различается как по высоте, так и по насыщенности.

Размер текста устанавливается через свойство font-size, значение может быть задано несколькими способами. Набор констант (хх-small, x-small, small, medium, large, x-large, xx-large) указывает размер, который называется абсолютным.

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

На практике константы применяются редко, а в основном используются допустимые единицы CSS: em (высота шрифта элемента), пункты (pt), пиксели (рх) и др. Перечислим несколько популярных.

Пиксели

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

Пункты

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

Эта единица показывает размер шрифта текущего элемента и он всегда равен 1em независимо от реального размера текста. Зачем тогда использовать? Em связан с размером шрифта родительского элемента и мы можем легко изменять размер текста самого элемента в большую (1.2em) или меньшую сторону (0.8em) без дополнительных вычислений. В каком-то смысле это является синонимом процентной записи.

rem

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

В примере 1 задействовано сразу несколько единиц измерений.

Пример 1. Изменение размеров текста

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Размер текста</title> <style> body { font-size: 16px; } h2 { font-size: 22pt; } p { font-size: 1.5em; } </style> </head> <body> <h2>Почему неоднозначна первообразная функция?</h2> <p>Начало координат, в первом приближении, непредсказуемо. Абсолютно сходящийся ряд накладывает полином, что несомненно приведет нас к истине.</p> </body> </html>

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

Рис. 2. Задание размера для заголовка и основного текста

<big>
font-size

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

font-size — CSS — Дока

Кратко

Скопировано

Используй это свойство, чтобы задать размер текста.

Примеры

Скопировано

Размер шрифта в абзаце будет равен 14 пикселям:

p {  font-size: 14px;}
          p {
  font-size: 14px;
}

Как пишется

Скопировано

Вот какие значения можно задать:

em — относительная единица, которая определяется по родительскому элементу. 1em — это стандартный размер текста, который установлен в браузере. Обычно он равен 16px. Соответственно, 2em будут равны 32px, а 0.5em — 8px. Если задаёшь font-size внутри другого элемента, то em будет рассчитан относительно этого элемента.
rem — работает похожим образом, что em, но в этом случае размер шрифта зависит не от родительского элемента, а от корневого html элемента. Другими словами, так можно не зависеть от размера родительского элемента.
% — значение в процентах, например 80%. Работает похожим образом, что и единица em. За 100% берётся размер текста в родительском элементе. Значение может быть только положительным.
px — можно задать значение в пикселях, когда важно, чтобы шрифт всегда был одного конкретного размера, вне зависимости от браузера и настроек устройства. Это не всегда лучший вариант, потому что, например, пользователи, которые плохо видят и используют крупные шрифты, не смогут увеличить текст в своём браузере.
xx-small, x-small, small, medium, large, x-large, xx-large — абсолютные значения, которые зависят от настроек браузера и операционной системы. Обычно не используют.
larger, smaller — больший или меньший размер шрифта относительно родительского элемента. Обычно не используют.

Ещё примеры

Скопировано

Значение в em высчитывается относительно текущего шрифта. Поэтому дочерняя строка в 1.5 раза больше, чем родительская.

<div>  Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера,  <span>    а этот текст в 1.  5 раза больше, чем в родительском контейнере.  </span></div>
          <div>
  Размер этого текста в 1.5 раза больше, чем стандартный размер вашего браузера,
  <span>
    а этот текст в 1.5 раза больше, чем в родительском контейнере.
  </span>
</div>

.parent {  font-size: 1.5em;}.child {  font-size: 1.5em;}
          .parent {
  font-size: 1.5em;
}
.child {
  font-size: 1.5em;
}

Открыть демо в новой вкладке

А вот как сочетается значение em, когда родительский элемент задан в процентах.

Очень часто можно встретить ситуацию, когда размер шрифта у

html равен 62.5%. Это магическое число появилось не просто так. Всё дело в том, что стандартный размер шрифта в браузере — 16 пикселей. А 62.5% от него равно 10 пикселям. Что крайне удобно для расчётов.

<div>  <span>    Здесь основной текст такой же, как в стандартных настройках браузера,    <span>а эта фраза в 1. 6 раз больше, чем основной текст</span>.  </span></div>
          <div>
  <span>
    Здесь основной текст такой же, как в стандартных настройках браузера,
    <span>а эта фраза в 1.6 раз больше, чем основной текст</span>.
  </span>
</div>

Теперь 1 em будет равен 10 px (62.5% от 16), а размер шрифта <span> будет 10 * 1.6 = 16px:

html {  font-size: 62.5%;}span {  font-size: 1.6em;}
          html {
  font-size: 62.5%;
}
span {
  font-size: 1.6em;
}

Открыть демо в новой вкладке

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

<span>  Теперь один контейнер находится <span>внутри другого</span>, но относительный  размер текста больше не зависит от родительского элемента.</span>
           <span>
  Теперь один контейнер находится <span>внутри другого</span>, но относительный
  размер текста больше не зависит от родительского элемента. 
</span>

Размер 1em равен 16px, как в стандартных настройках браузера:

html {  font-size: 100%;}span {  font-size: 2rem;}
          html {
  font-size: 100%;
}
span {
  font-size: 2rem;
}

Открыть демо в новой вкладке

И ещё три примера, как можно задать размер шрифта.

Текст параграфа будет очень большим:

p {  font-size: xx-large;}
           p {
  font-size: xx-large;
}

Заголовок <h2> будет в 2.5 раза больше, чем текст вокруг него:

h2 {  font-size: 250%;}
          h2 {
  font-size: 250%;
}

Размер текста внутри тега <span> будет равен 16px, независимо ни от чего:

span {  font-size: 16px;}
          span {
  font-size: 16px;
}

Подсказки

Скопировано

💡 Если не задать никакое значение font-size, то браузер использует размер по умолчанию. Обычно это 16px.

💡 У font-size не бывает отрицательных значений.

💡 Размер шрифта наследуется.

На практике

Скопировано

Алёна Батицкая советует

Скопировано

🛠 Для использования относительных единиц измерения — em, rem или проценты — нужно чётко понимать, от чего будет отсчитываться 1 единица. На начальном этапе я бы не советовала использовать эти единицы для размера шрифта. Велика вероятность, что вы запутаетесь в вычислениях.

🛠 Если в вёрстке используются строчно-блочные (inline-block) элементы, то не забывай задавать родителю свойство font-size со значением 0.

Между строчно-блочными (inline-block) элементами, как и между словами в тексте, есть небольшие отступы — пробелы. Устанавливайте размер шрифта в ноль чтобы эти отступы не влияли на положение вложенных элементов и можно было получить более ожидаемый результат от задания внешних отступов.

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

Сперва она перекочевала в Фотошоп, к дизайнерам. Многие из них также перешли из печатки в веб. По инерции эта единица просочилась и в CSS, но свою логическую составляющую она потеряла. Совершенно не понятно что принимать за пункт в вебе. Гораздо логичнее оперировать пикселями — точками на экране.

Код размера шрифта HTML

В HTML размер шрифта задается с помощью CSS (каскадных таблиц стилей). Размер шрифта задается с помощью свойства font-size.

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

Абсолютный размер
Относительный размер
Фиксированный размер
Процент

Вариант 1: Абсолютный размер

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

Вот пример установки размера шрифта с использованием абсолютных размеров:

Абсолютный размер — xx-small

Абсолютный размер — x маленький

Абсолютный размер – маленький

Абсолютный размер — средний

Абсолютный размер — большой

Абсолютный размер — x-большой

Абсолютный размер — xx-large

Вариант 2: относительный размер

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

Вариант 3: Значение длины

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

Возможны восемь значений.

Относительные значения:

em («размер шрифта» соответствующего шрифта)
ex (высота x соответствующего шрифта)
пикселей (пикселей относительно устройства просмотра)

Абсолютные значения:

дюймов (дюймы — 1 дюйм равен 2,54 сантиметра)
см (сантиметров)
мм (миллиметров)
pt (пункты — точки, используемые CSS2, равны 1/72 дюйма)
шт (пика — 1 пика равна 12 очкам)

Примеры относительных значений

Размер шрифта указан 1,2 em

Размер шрифта указан 1,4 em

Размер шрифта указан 1,8em

<ч />

Размер шрифта указан 2ex

Размер шрифта указан в 3ex

Размер шрифта указан как 4ex

<ч />

Размер шрифта указан 12 пикселей

Размер шрифта указан 14 пикселей

Размер шрифта указан 18 пикселей

Примеры абсолютных значений

Размер шрифта указан 0,12 дюйма

Размер шрифта указан 0,18 дюйма

Размер шрифта указан 0,25 дюйма

<ч />

Размер шрифта указан 0,35 см

Размер шрифта указан 0,45 см

Размер шрифта указан 0,6 см

<ч />

Размер шрифта указан 3,5 мм

Размер шрифта указан 4,5 мм

Размер шрифта указан 6 мм

<ч />

Размер шрифта указан 10pt

Размер шрифта указан 12pt

Размер шрифта указан 16pt

<ч />

Размер шрифта указан как 0,8 пикселя

Размер шрифта указан как 1 шт.

Размер шрифта указан как 1,2 пикселя

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

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

Дополнительные свойства шрифта

Вот еще свойства шрифта CSS, которые вы можете использовать в своем тексте:

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

text-size-adjust — CSS: Каскадные таблицы стилей

Экспериментальная: Это экспериментальная технология
Внимательно проверьте таблицу совместимости браузера, прежде чем использовать ее в производстве.

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

 /* Значения ключевых слов */
регулировка размера текста: нет;
настройка размера текста: авто;
/* <процентное> значение */
регулировка размера текста: 80%;
/* Глобальные значения */
настройка размера текста: наследовать;
настройка размера текста: начальный;
настройка размера текста: вернуться;
настройка размера текста: возврат слоя;
настройка размера текста: не установлено;

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

Поскольку текст, уменьшенный до размера экрана мобильного устройства, может быть очень маленьким, многие мобильные браузеры применяют алгоритм увеличения текста, чтобы сделать его более читаемым. Когда элемент, содержащий текст, занимает 100 % ширины экрана, алгоритм увеличивает размер текста, но без изменения макета. Свойство text-size-adjust позволяет веб-разработчикам отключать или изменять это поведение, поскольку веб-страницы, разработанные с учетом небольших экранов, в нем не нуждаются.

Свойство text-size-adjust указано как none , auto или a .

Значения

нет: Отключает алгоритм наполнения браузера.
авто: Включает алгоритм наполнения браузера. Это значение используется для отмены значения none , ранее установленного с помощью CSS.
<процент>: Включает алгоритм расширения браузера, определяя процентное значение, на которое увеличивается размер шрифта.

Начальное значение авто для браузеров смартфонов, поддерживающих инфляцию, нет в других случаях (и затем не подлежит изменению).

Относится ко всем элементам

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

Процент Да, см. Соответствующий размер текстового шрифта

. Аутированное значение с указанными

Тип

Анимация . Дисквис

.
нет |

Базовое отключение использования

Как упоминалось выше, на правильно спроектированном адаптивном сайте text-size-adjust поведение не требуется, поэтому разработчики могут отключить его, указав значение none:

 p {
  -webkit-text-size-adjust: нет;
  регулировка размера текста: нет;
}

Спецификация
Модуль настройки размера текста для мобильных устройств CSS Уровень 1 # Adjustment-control

B 900 Таблицы в браузере с включенной загрузкой только CD.

Html размер текста: Тег | htmlbook.ru

Размер текста | WebReference

font-size — CSS — Дока

Кратко

Примеры

Как пишется

Ещё примеры

Подсказки

На практике

Алёна Батицкая советует

Код размера шрифта HTML

Вариант 1: Абсолютный размер

Вариант 2: относительный размер

Вариант 3: Значение длины

Примеры относительных значений

Примеры абсолютных значений

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

Дополнительные свойства шрифта

text-size-adjust — CSS: Каскадные таблицы стилей

Значения

Базовое отключение использования

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

Рубрики

Рубрики