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

Ответ 1

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

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

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

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

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

div {
    font-size: 110%
}

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

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

div {
    font-size: 90%
}

Это приведет к тому, что все div имеют размер шрифта 12.6px.

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

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

Внутренний div будет иметь размер шрифта 11.34px (90% от 12.6px), который, возможно, не был предназначен.

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

Ответ 2

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

body {
  font-size: 100%;
}

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

Спектр говорит, что% отображается

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

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

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

Ответ 3

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

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

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

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

input {font-size: 100%}

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

Это легко.

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

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

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

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

Литература:

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