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

141

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

Процент (%): Единица процента очень похожа на единицу «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:

Настройки Google Chromeg

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

введите описание изображения здесь

user852091
источник

Ответы:

90

Значение по умолчанию для браузера составляет примерно 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

b01
источник
Благодарность! Это делает его намного понятнее. Но меня все еще интересуют статьи, в которых говорится о «точности» или «согласованности» при использовании%. Это кажется совершенно НЕПРАВИЛЬНЫМ, если я правильно интерпретирую ваш ответ. Я обновил вопрос,
добавив
3
Ответ на заданный вопрос (100% чего?) Неверен, есть несколько неточностей (не все элементы наследуют размер шрифта), и есть примечания и мнения по вопросам, о которых не спрашивали.
Юкка К. Корпела
Плотность пикселей действительно нужно учитывать. Человек, занимающий 100% страницы на телефоне 4K, подумает, что у него тысячи пикселей по горизонтали и вертикали. Для Flash-содержимого с NO_SCALE, например веб-приложений и т. Д., Элементы управления будут крошечными, особенно меню, например, на LG G3. Это в равной степени верно для некоторого содержимого HTML, размер которого равен пикселям. Так или иначе, необходимо учитывать плотность пикселей (пикселей на дюйм), используя либо полностью относительные единицы, либо динамическое изменение размера на основе JavaScript.
Трийнко
1
Подтверждено, что современные браузеры по-прежнему используют по умолчанию 12pt / 16px @ 96ppi. Кстати, вы можете использовать rem вместо em, чтобы всегда масштабировать определенный элемент относительно корня (элемент html или значение по умолчанию браузера). Может быть полезно при сложной иерархии элементов относительно большого размера.
Beejor 05
Это лучше установить ваши font-sizeиспользуя относительные единицы , такие как em, remили %. Использование pxпереопределит размер шрифта браузера по умолчанию! Многие пользователи указывают собственный размер шрифта, чтобы облегчить чтение текста.
mfluehr
15

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

body {
  font-size: 100%;
}

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

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

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

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

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

Джейсон Дженнаро
источник
на самом деле родитель bodyесть html. так body { font-size: 100%; }будет 100% htmlразмера шрифта, а не по умолчанию в браузере. Однако обычно это одно и то же, так что вы фактически правы. Но иногда вы увидите html { font-size: ??? }правило.
chharvey
9

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

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

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

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

input {font-size: 100%}

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

Юкка К. Корпела
источник
3
Единственный случай, когда это font-size:100%может быть полезно, - это режим Quirks, где размеры шрифта не наследуются в таблицах. В этом стиле таблицы получают родительский размер шрифта. Конечно, никто в здравом уме больше не использует режим Quirks ...
Мистер Листер,
4

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

RocketR
источник
Так это будет по-разному, если в каждом браузере?
user852091
2
Да, в каждом браузере есть свои настройки по умолчанию, включая размер шрифта. Вот почему вам обычно нужно использовать сброс css.
RocketR
1
Это неверно. Это процент от родительского элемента. У вас может быть процент от размера шрифта по умолчанию, потому что ваш родительский элемент унаследовал размер шрифта по умолчанию.
Zectbumo
@Zectbumo Верно, не совсем точно. Но в вопросе упоминается bodyне произвольно вложенный элемент, поэтому ответ правильный с маленькой звездочкой :)
RocketR
: - / за исключением того, что он вложен, потому что родительский
элемент
4

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

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

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

Г-н Листер
источник
3

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

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

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

Тим
источник
1

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

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

Йохай Тиммер
источник
1

В соответствии со ВСЕМИ СПЕЦИФИКАМИ, ОТНОСЯЩИМИСЯ ДО 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: проценты в корневом элементе относятся к размеру шрифта браузера по умолчанию, который может отличаться для каждого пользователя.

Ссылки:

чарви
источник
0

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

Мит
источник