CSS: 100% размер шрифта - 100% чего?

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

Процент (%): Единица процента очень похожа на единицу «em», за исключением нескольких фундаментальных отличий. Прежде всего, текущий размер шрифта равен 100% (т.е. 12pt = 100%). При использовании процентной единицы ваш текст остается полностью масштабируемым для мобильных устройств и для доступности.

Источник: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Но если вы говорите «т.е. 12 баллов = 100%», это означает, что сначала вам нужно определить font-size: 12pt. Вот как это работает? Сначала вы определяете размер в абсолютном выражении, а затем называете его «100%»? Это не имеет большого смысла, поскольку многие образцы говорят, что полезно поставить:

body {
  font-size: 100%;
}

Итак, ЧТО ТАКОЕ размер шрифта относительно? Я заметил, что размер, который я вижу на своем экране, отличается для каждого шрифта. Например, Arial выглядит намного больше, чем Times New Roman. Кроме того, если бы я просто сделал это, размер тела = 100%, означало бы это, что он будет одинаковым во всех браузерах? Или только если я сначала определю абсолютное значение?

ОБНОВЛЕНИЕ, СБ 23 ИЮЛЯ

Я добираюсь туда, но, пожалуйста, потерпите меня.

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

1. Всегда ли этот стандартный размер одинаков для каждой версии браузера или он различается в зависимости от версии?
2. Я! нашел (см. изображение ниже) настройки для Google Chrome (никогда раньше не смотрел на это!), и я вижу стандартные настройки "serif", "sans-serif" и "monospace". Но как интерпретировать это для других шрифтов? Скажем, я определяю font: 100% Georgia;, какой размер будет у браузера? Будет ли он искать стандартный размер шрифта с засечками или шрифт Georgia имеет стандартный размер для браузера
3. На нескольких сайтах я читал такие вещи, как Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today. Но из того, что я сейчас узнаю, я считаю, что вам нужно выбирать между текстом с изменяемым размером (используя% или em, как они рекомендуют в этой цитате) или иметь «точные, согласованные размеры шрифта во всех браузерах» (используя px или pt в качестве базы). Это правильно?

Настройки Google:

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

Значение по умолчанию для браузера составляет примерно 16pt для Firefox. Вы можете проверить, зайдя в параметры Firefox, щелкнув вкладку «Содержимое» и проверив размер шрифта. Вы можете сделать то же самое и для других браузеров.

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

body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px
}

Теперь размер шрифта всех моих тегов HTML унаследует размер шрифта 14 пикселей.

Скажем, я хочу, чтобы размер шрифта всех div был на 10% больше, чем body, я просто делаю:

div {
    font-size: 110%
}

Теперь любой браузер, просматривающий мои страницы, автоматически сделает все div на 10% больше, чем у тела, что должно быть примерно 15,4 пикселя.

Если я хочу, чтобы размер шрифта всех div был на 10% меньше, я делаю:

div {
    font-size: 90%
}

Это приведет к тому, что все блоки div будут иметь размер шрифта 12,6 пикселей.

Также вы должны знать, что, поскольку font-size наследуется, каждый вложенный div будет уменьшать размер шрифта на 10%, поэтому:

<div>Outer DIV.
    <div>Inner DIV</div>
</div>

Внутренний div будет иметь размер шрифта 11,34 пикселей (90% от 12,6 пикселей), что, возможно, не предназначалось.

Это может помочь в объяснении: http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage

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

body {
  font-size: 100%;
}

браузер отобразит шрифт в соответствии с пользовательскими настройками этого браузера.

В спецификации сказано, что% отображается

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

http://www.w3.org/TR/CSS1/#font-size

В данном случае я понимаю, что это означает, на что настроен браузер.

Процент в значении font-sizeсвойства относительно размера шрифта родительского элемента . CSS 2.1 говорит об этом неясно и запутанно (имея в виду «унаследованный размер шрифта»), но CSS3 Text говорит об этом очень четко.

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

Установка font-size: 100%во многих случаях бессмысленна, поскольку элемент наследует размер шрифта своего родителя (что приводит к тому же результату), если никакая таблица стилей не устанавливает собственный размер шрифта. Однако может быть полезно переопределить настройки в других таблицах стилей (включая таблицы стилей по умолчанию для браузера).

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

input {font-size: 100%}

Для bodyэлемента font-size: 100%довольно часто используется логически избыточная настройка , так как считается, что она помогает от некоторых ошибок браузера (в браузерах, которые, вероятно, сейчас потеряли свое значение).

Он относительно размера шрифта браузера по умолчанию, если вы не замените его значением в pt или px.

Извините, если я опаздываю на вечеринку, но в своей редакции вы делаете замечание font: 100% Georgia, на которое другие ответы не ответили.

Есть разница между font: 100% Georgiaи font-size:100%; font-family:'Georgia'. Если бы это было все, что делал сокращенный метод, часть размера шрифта была бы бессмысленной. Но он также устанавливает для многих свойств значения по умолчанию: высота строки становится normal(или около 1,2), то же самое для стиля (без курсива) и веса (без жирного шрифта).

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

Как вы убедительно показали, font-size: 100%;не во всех браузерах они будут отображаться одинаково. Однако вы зададите начертание шрифта в файле CSS, поэтому оно будет одинаковым (или резервным) во всех браузерах.

Я считаю, что это font-size: 100%;может быть очень полезно в сочетании с emбазовым дизайном. Как показано в этой статье , это позволит создать очень гибкий веб-сайт.

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

Относительно размера по умолчанию, определенного для этого шрифта.

Если кто-то открывает вашу страницу в веб-браузере, он использует шрифт и размер шрифта по умолчанию.

В соответствии со ВСЕМИ СПЕЦИФИКАМИ, ОТНОСЯЩИМИСЯ ДО 1996 г. , процентные значения font-sizeотносятся к (вычисленному) размеру шрифта родительского элемента .

<style>
div {
  font-size: 16px;
}
span {
  font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>

Это так просто.

Что, если divобъявит относительный размер шрифта, например ems, или, что еще хуже, другой процент ?? См. «Вычислено» выше. Независимо от того, в какую абсолютную единицу преобразуется относительная единица.

Единственный вопрос, который остается, - что происходит, когда вы используете процентное значение для корневого элемента, у которого нет родителя:

html {
  font-size: 62.5%; /* 62.5% of what? */
}

В таком случае см. «Дубликат» этого вопроса. TL; DR: проценты в корневом элементе относятся к размеру шрифта браузера по умолчанию, который может отличаться для каждого пользователя.

Ссылки:

• Спецификация CSS 1 (1996 г.)
• Спецификация CSS 2.1 (2011 г.)
• Спецификация CSS Fonts Level 3 (2013)
• Проект редактора CSS Fonts Level 3 (2017)

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