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

Question

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

Процент (%): процентная единица очень похожа на единицу «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 или оч как база). Это правильно?

Настройки Google:

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

Answer 1

Браузер по умолчанию, например, 16pt для Firefox. Проверить это можно, перейдя в настройки Firefox, перейдя на вкладку Content и проверив размер шрифта. Вы можете сделать то же самое для других браузеров.

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

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

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

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

div {
    font-size: 110%
}

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

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

div {
    font-size: 90%
}

Это позволит всем элементам div иметь размер шрифта 12,6 пикселей.

Также вы должны знать, что поскольку размер шрифта наследуется, то каждый вложенный 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

Answer 2

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

body {
  font-size: 100%;
}

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

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

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

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

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

Answer 3

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

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

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

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

input {font-size: 100%}

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

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

Answer 7

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

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

Answer 8

Согласно ВСЕ СПЕЦИАЛЬНЫЕ ОБРАТНЫЕ СВЕДЕНИЯ ДО 1996 , процентные значения в font-size относятся к (вычисленному) 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? */
}

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

Ссылки:

• CSS 1 spec (1996)
• CSS 2.1 spec (2011)
• Шрифты CSS уровня 3 (2013)
• Черновой вариант шрифта 3 уровня редактора CSS (2017)

Answer 9

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