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

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

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 px. Или кто-то с маленьким экраном с большим разрешением, который увеличивает его размер шрифта по умолчанию, потому что в противном случае он должен щуриться. Большинство сайтов сломались бы, но сайты на основе em способны справиться с этими ситуациями.

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

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

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

по данным ВСЕ ТЕХНИЧЕСКИЕ ХАРАКТЕРИСТИКИ, НАЧИНАЯ С 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? */
}

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

ссылки:

• CSS 1 spec (1996)
• CSS 2.1 spec (2011)
• CSS шрифты 3-го уровня спецификации (2013)
• CSS шрифты Уровень 3 проект редактора (2017)