CSS:размер шрифта:наследовать * 70%?

Question

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

Answer 1

EM работают как проценты в том смысле, что базовый размер шрифта всегда равен 1em, а .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 теперь настолько хороша *, что, если вы его еще не используете, стоит посмотреть. Root EM (rem) привязан к размеру корневого шрифта (документа) и, в отличие от «обычного» EM, это не затронуто вложением - это всегда относится к корневому размеру шрифта. Хотя em по-прежнему очень полезны для большинства размеров текста, именно потому, что учитывает вложение, rem отлично подходит для таких вещей, как поля и поля отступы, которые вы, возможно, не захотите изменять с помощью вложения (это обычная причина для смещения левого поля), но вы делаете хотите изменить размер вместе с корневым html размер шрифта (обычно с использованием медиа-запросов ).

Вы можете узнать больше о EMs и REMs больше в Design Shack .

*) IE8 - единственный распространенный браузер (~ 5%), который его не поддерживает - если вам нужно поддерживать IE8, просто включите эквивалентный размер в пикселях перед в rem объявление.

Answer 2

В CSS, если вы задаете относительную единицу, она по умолчанию соответствует размеру, который вы унаследовали. Это означает, что вы можете просто определить размер шрифта кнопки как «70%».

Есть также две другие относительные единицы, удобные для размеров шрифта: em и ex. 1 em - ширина буквы «M», 1 ex - высота буквы «x» - очевидно, также наследуется.

Вы не должны использовать px в качестве размера шрифта, как в вашем примере. px не подчиняется DPI экрана. Например, на моем экране и 10px и 26px будут маленькими. Вместо этого вы должны использовать 'pt' или даже начинать с 'em'.

Answer 3

Пытаться:

font-size: 0.7em;

Вот еще информация: Как изменить размер текста в CSS в списке Apart

Answer 4

<input style="font-size: 70%" class="button" type="submit" value="Go">

?