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;, який розмір візьме браузер? Чи буде він шукати стандартний розмір для serif, чи має шрифт "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:

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

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

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

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

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

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

div {
    font-size: 110%
}

Тепер будь-який веб-переглядач, який переглядає мої сторінки, автоматично робить всі діви на 10% більшими, ніж тіло, що має бути на кшталт 15,4 пікселя.

Якщо я хочу, щоб розмір шрифту всіх div був на 10% меншим, я роблю:

div {
    font-size: 90%
}

Це призведе до того, що всі диви мають розмір шрифту 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

Я розумію, що коли шрифт встановлюється наступним чином

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елемент, як правило, має параметр у аркуші стилю браузера, що робить його шрифт за замовчуванням меншим за розмір тексту для копіювання. Якщо ви хочете, щоб розмір шрифту був однаковим, ви можете встановити

введення {шрифт-розмір: 100%}

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

Це відносно розміру шрифту браузера за замовчуванням, якщо ви не перекриєте його значенням у pt або px.

Вибачте, якщо я запізнився на вечірку, але у своїй редакції ви зробите зауваження font: 100% Georgia, на яке інші відповіді не відповіли.

Існує різниця між font: 100% Georgiaі font-size:100%; font-family:'Georgia'. Якби це було все за допомогою скороченого методу, частина розміру шрифту була б безглуздою. Але він також задає багато властивостей своїм значенням за замовчуванням: висота рядка стає normal(або близько 1,2), ditto для стилю (не курсивом) і ваги (нежирний).

Це все. В інших відповідях уже згадувалося все інше, що потрібно було згадати.

Як ви переконливо показали, показник 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? */
}

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

Список літератури:

• CSS 1 специфікація (1996)
• Специфікація CSS 2.1 (2011)
• Специфікація шрифтів CSS рівня 3 (2013)
• Чернетка редактора CSS Fonts Level 3 (2017)