CSS: размер шрифта: наследовать * 70%?
Есть ли способ указать размер шрифта для класса, который, скажем, составляет 70% от унаследованного размера шрифта?
У меня есть общий класс «кнопки», который настраивает мои кнопки с соответствующими границами, фоном и т. д. Я использую его в нескольких местах, в том числе в одном, где размер шрифта довольно мал, и в другом, где размер шрифта довольно большой.
<div style = "font-size: 26px;">
Push this: <input class = "button" type = "submit" value = "Go">
</div>
<div style = "font-size: 10px;">
Push this too: <input class = "button" type = "submit" value = "Go">
</div>
В обоих случаях я бы хотел, чтобы размер шрифта кнопки составлял около 70% от размера шрифта диапазона или div, в котором находится кнопка.
Могу ли я сделать это с помощью чистого CSS?
Ответы 4
Пытаться:
font-size: 0.7em;
Дополнительная информация: Как изменить размер текста в CSS в A List Apart
@Tom: em относительно текущего размера шрифта.
em всегда относительно размера родительского шрифта. Но 0.7em НЕ дает вам 70%.
@Treb: [необходима ссылка] (чтобы украсть ссылку из Википедии)
В CSS, если вы задаете относительную единицу, она по умолчанию соответствует размеру, от которого вы унаследовали. Это означает, что вы можете просто определить размер шрифта кнопки как «70%».
Также есть две другие относительные единицы, удобные для размеров шрифта: em и ex. 1 em - это ширина буквы «M», 1 ex - высота буквы «x» - очевидно, также унаследованная.
Вы не должны использовать px как размер шрифта, как в вашем примере. px не подчиняется разрешению экрана. Например, на моем экране и то и другое 10 пикселей и 26 пикселей будет маленьким. Вместо этого вы должны использовать «pt» или даже начинать с «em».
Чтобы добавить к этому - я всегда считал, что лучше установить размер шрифта на 62,5% для элемента body, а затем работать с em везде. 62,5% работает с размером шрифта 10pt при размере шрифта браузера по умолчанию (в большинстве случаев).
62,5% для меня звучит очень резко. У вас есть пример URL? Мне было бы интересно, как это здесь выглядит. Взамен получу скриншот.
более конкретно 1 em - это ширина буквы верхний регистр 'M'
<input style = "font-size: 70%" class = "button" type = "submit" value = "Go">
?
Всегда избегайте размещения кода на странице, старайтесь сохранить его в таблицах стилей для удобства обслуживания и разделения.
EM работают как проценты в том смысле, что размер базового шрифта всегда равен 1em, а 0,7em будет составлять 70% от этого (точно так же, как 1,2em будет эквивалентно 120% от размера базового шрифта). Чтобы это работало правильно, вам необходимо определить базовый размер шрифта в теле документа. Путем экспериментов я обнаружил, что размер шрифта: 77%; дает вам хороший базовый размер во всех браузерах (то есть делает рендеринг 1em в "нормальном" и удобочитаемом размере). Вы можете попробовать другие значения от 75% до 80% в зависимости от того, какое семейство шрифтов вы хотите использовать. Также имейте в виду, что относительные размеры шрифтов наследуются накопительно, например:
<style>
small { font-size: .8em; }
span.tiny { font-size: .8em }
</style>
<small>This text is 80% of base size where as
<span class = "tiny">this text is 80% of 80% (or 64%) of base size</span>
</small>
Это работает в вашу пользу, так как для достижения желаемого вам нужно всего лишь задать классу кнопок размер шрифта 0,7em (кнопки тогда всегда будут иметь размер шрифта, равный 70% от родительского объекта). Удачного кодирования!
2014 редактирование:
Стоит отметить, что поддержка модуля Root EM в браузере теперь настолько хороша *, что, если вы еще не используете его, стоит изучить. Корневой EM (rem) привязан к размеру корневого (документа) шрифта и, в отличие от «обычного» EM, на него не влияет вложенность - он всегда связан с размером корневого шрифта. В то время как em по-прежнему очень полезны для большинства размеров текста, именно потому, что делает учитывает вложенность, rem отлично подходит для таких вещей, как поля и отступы, которые вы, возможно, не захотите изменять размер с вложением (это частая причина смещения левых полей) , но размер которого вы делать хотите изменить вместе с размером корневого шрифта html (обычно с помощью медиа-запросы).
Вы можете узнать больше о EM и REM на Design Shack.
*) IE8 - единственный распространенный браузер (~ 5%), который его не поддерживает - если вам нужно поддерживать IE8, просто включите эквивалентный размер в пикселях до в декларацию rem.
Я не понимаю, как 0,7em соотносится с родительским размером?