Размер текста зависит от: font-size — CSS | MDN

html — Изменение размера шрифта в процентах

Вопрос задан 2 года 1 месяц назад

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

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

Как сделать так чтобы вместо того чтобы писать в @media screen, каждое изменение щрифта, размер шрифта сам менялся как в случае img, когда задаешь размер в процентах. Задал и текст в процентах но не вышло

p {
  font-size: 280%;
}

<p>text</p>

Ответ нашел!

px – абсолютные пиксели, к которым привязаны и потому не нужны mm, cm, pt и pc. Используется для максимально конкретного и точного задания размеров.

em – задаёт размер относительно шрифта родителя, можно относительно конкретных символов: «x»(ex) и «0»(ch), используется там, где нужно упростить масштабирование компоненты.

rem – задаёт размер относительно шрифта , используется для удобства глобального масштабирования: элементы которые планируется масштабировать, задаются в rem, а JS меняет шрифт у .

% – относительно такого же свойства родителя (как правило, но не всегда), используется для ширин, высот и так далее, без него никуда, но надо знать, относительно чего он считает проценты. vw, vh, vmin, vmax – относительно размера экрана.

vw – 1% ширины окна

vh – 1% высоты окна

• html
• css

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

Документация по свойствам

1

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

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

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

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

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

Почта

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

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

Почта

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

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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, но свою логическую составляющую она потеряла. Совершенно не понятно что принимать за пункт в вебе. Гораздо логичнее оперировать пикселями — точками на экране.

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

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

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

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

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

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

Свойство text-size-adjust указано как

none , auto или .

Значения

нет

Отключает алгоритм наполнения браузера.

авто

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

<процент>

Включает алгоритм расширения браузера, определяя процентное значение, на которое увеличивается размер шрифта.

Начальное значение	авто для браузеров смартфонов, поддерживающих инфляцию, нет в других случаях (и затем не подлежит изменению).
Applies to	all elements
Inherited	yes
Percentages	yes, refer to the corresponding size of the text font
Computed value	as specified
Тип анимации	дискретный

 text-size-adjust = 
 auto | 
 нет | 
 <процент [0,∞]> 

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

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

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

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

Таблицы BCD загружаются только в браузере

с включенным JavaScript. Включите JavaScript для просмотра данных.

• Документация Apple
• Описание поведения Google Chrome
• Описание поведения геккона, Л. Дэвид Барон

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 24 февраля 2023 г. участниками MDN.

font-size-adjust — CSS: Каскадные таблицы стилей буквы).

 /* Использовать указанный размер шрифта */
настройка размера шрифта: нет;
/* Используйте размер шрифта, который делает строчные буквы
   буквы половины указанного размера шрифта */
настройка размера шрифта: 0,5;
/* Два значения — добавлены в спецификации уровня 5 */
настройка размера шрифта: экс-высота 0,5;
/* Глобальные значения */
настройка размера шрифта: наследовать;
настройка размера шрифта: начальный;
настройка размера шрифта: вернуться;
настройка размера шрифта: восстановить слой;
настройка размера шрифта: не установлено;
 

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

Чтобы использовать это свойство таким образом, который совместим с браузерами, не поддерживающими font-size-adjust указывается как число, на которое умножается свойство font-size . Это означает, что значение, указанное для свойства, обычно должно быть соотношением сторон шрифта первого выбора. Например, рассмотрим следующую таблицу стилей:

 размер шрифта: 14 пикселей;
настройка размера шрифта: 0,5;
 

Это действительно указывает, что строчные буквы шрифта должны быть 7px в высоту (0,5 × 14px). Это по-прежнему будет давать приемлемые результаты в браузерах, не поддерживающих font-size-adjust , где будет использоваться шрифт 14px .

Значения

нет

Выберите размер шрифта на основе только свойства font-size .

экс-высота | высота крышки | ch-ширина | ic-ширина | ic-высота

Указывает метрику шрифта для нормализации. По умолчанию экс-высота . Один из:

экс-высота

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

высота крышки

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

ширина канала

Нормализуйте горизонтальный узкий шаг шрифтов, используя переднюю ширину «0» (ZERO, U+0030), деленную на размер шрифта.

ic-ширина

Нормализуйте ширину шрифта по горизонтали, используя предварительную ширину «水» (водная идеограмма CJK, U+6C34), деленную на размер шрифта.

ic-высота

Нормализуйте ширину шрифта по вертикали, используя предварительную высоту «水» (водная идеограмма CJK, U+6C34), деленную на размер шрифта.

<номер>

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

Указанное число обычно должно быть соотношением сторон (отношение x-высоты к размеру шрифта) первого выбора font-family . Это означает, что шрифт первого выбора, когда он доступен, будет отображаться в браузерах того же размера, независимо от того, поддерживают ли они font-size-adjust .

0 дает текст нулевой высоты (скрытый текст).

Исходное значение	нет
Применяется ко всем элементам	. Это также относится к ::first-letter и ::first-line .
Унаследовано	да
Расчетное значение	как указано
Тип анимации	число

 настройка размера шрифта = 
 нет | 
 <число [0,∞]> 

Настройка размера строчных букв

HTML

 

  В этом тексте используется шрифт Times (10 пикселей), который трудно читать при маленьком размере. 


  В этом тексте используется шрифт Verdana (10 пикселей), который имеет относительно большие строчные буквы.
  буквы.


  Это 10px Times, но теперь настроено на то же соотношение сторон, что и
  Вердана.

 

CSS

 .times {
  семейство шрифтов: Times, с засечками;
  размер шрифта: 10 пикселей;
}
.вердана {
  семейство шрифтов: Verdana, без засечек;
  размер шрифта: 10 пикселей;
}
.adjtimes {
  семейство шрифтов: Times, с засечками;
  настройка размера шрифта: экс-высота 0,58;
  размер шрифта: 10 пикселей;
}
 

Results

Specification
CSS Fonts Module Level 5 # font-size-adjust-prop

BCD tables only load in the browser

с включенным JavaScript. Включите JavaScript для просмотра данных.

• размер шрифта
• вес шрифта
• Основные стили текста и шрифта
• настройка размера дескриптор

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.

  No related posts.