CSS: 100% размер шрифта-100% чего?
здесь много статьи и вопросы о процент размера против другого размера шрифты. Однако я не могу выяснить, какой должна быть ссылка на процентное значение. Я понимаю, что это тот же размер во всех браузерах. Я также читаю это, например:
процент ( % ): процентная единица очень похожа на единицу "em", за исключением нескольких фундаментальных различий. Прежде всего, текущий размер шрифта равен 100% (т. е. 12pt = 100%). При использовании единицы процента текст остается полностью масштабируемым для мобильных устройств и доступности.
источник:http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
но если вы говорите " ie 12 pt = 100%", то это означает, что вам сначала нужно определить font-size: 12pt. Так вот как это работает? Вы сначала определяете размер в абсолютной мере, а затем ссылаетесь на это как " 100%"? Не делает много смысла, так как многие образцы говорят, что полезно поставить:
body {
font-size: 100%;
}
делая это, что - размер шрифта относительно? Я замечаю, что размер, который я вижу на экране, отличается для каждого шрифта. Например, Ариал выглядит больше, чем Times New Roman. Кроме того, если бы я просто сделал это, размер тела = 100%, было бы это означает, что он будет одинаковым на всех браузерах? Или только если я сначала определю абсолютное значение?
ОБНОВЛЕНИЕ, СБ ИЮЛЬ 23
я добираюсь туда, но, пожалуйста, потерпите меня.
Итак, значение % относится к размеру шрифта браузера по умолчанию, если я правильно понимаю. Ну, это хорошо, но дает мне снова несколько других вопросов:
- этот стандартный размер всегда одинаковый для каждой версии браузера, или они различаются между версиями?
- я ! найдено (см. изображение ниже) настройки для Google Chrome (никогда не смотрел на это раньше!), и я вижу стандарт настройки" засечки"," без засечек "и" monospace". Но как я могу интерпретировать это для других шрифтов? Скажем, я определяю
font: 100% Georgia;, какой размер взять браузер? Будет ли он искать стандартный размер засечек или имеет шрифт "Georgia" стандартного размера для браузера - на нескольких сайтах я читать такие вещи, как
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:
вот как я думаю вещи мог бы похоже, если вы не определяете размер в абсолютных значениях.
9 ответов
браузер по умолчанию, который является чем-то вроде 16pt для Firefox, вы можете проверить, перейдя в параметры Firefox, нажав вкладку содержимого и проверив размер шрифта. То же самое можно сделать и для других браузеров.
мне лично нравится контролировать размер шрифта по умолчанию моих веб-сайтов, поэтому в файле CSS, который включен в каждую страницу, Я установлю тело по умолчанию, например:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px
}
теперь размер шрифта всех моих тегов HTML унаследует размер шрифта 14px.
скажите, что я хочу, чтобы все divs имели размер шрифта на 10% больше, чем тело, я просто делаю:
div {
font-size: 110%
}
теперь любой браузер, который просматривает мои страницы, автоматически сделает все divs на 10% больше, чем тело, которое должно быть что-то вроде 15.4 px.
если я хочу, чтобы размер шрифта всех div был на 10% меньше, я делаю:
div {
font-size: 90%
}
это сделает все divs имеют размер шрифта 12.6 px.
также вы должны знать, что, поскольку размер шрифта унаследовано, что каждый вложенный div будет уменьшаться в размере шрифта на 10%, так что:
<div>Outer DIV.
<div>Inner DIV</div>
</div>
внутренний div будет иметь размер шрифта 11.34 px (90% от 12.6 px), который, возможно, не был предназначен.
это может помочь в объяснении: 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% во многих случаях бессмысленно, так как элемент наследует размер шрифта своего родителя (что приводит к тому же результату), если ни одна таблица стилей не устанавливает свой собственный размер шрифта. Однако может быть полезно переопределить параметры в других таблицах стилей (включая таблицы стилей браузера по умолчанию).
например, an input элемент обычно имеет параметр в таблице стилей браузера, что делает его размер шрифта по умолчанию меньше, чем у копирования текста. Если вы хотите сделать размер шрифта то же самое, вы можете установить
вход { размер шрифта: 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-ориентированного проектирования. As в этой статье показывает, это создаст очень гибкий веб-сайт.
когда это полезно? Когда ваш сайт должен адаптироваться к пожеланиям посетителей. Взять для примера пожилой человек, который ставит свой размер шрифта по умолчанию в 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: проценты на корневом элементе относятся к размеру шрифта браузера по умолчанию, который может отличаться для каждого пользователя.
ссылки: