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

Question

Есть ли способ указать размер шрифта для класса, скажем, 70% от унаследованного размера шрифта?

У меня есть общий класс "button", который устанавливает мои кнопки с соответствующими границами, фоном и т. Д. Я использую его в нескольких местах, в том числе там, где размер шрифта довольно мал, и в другом, где размер шрифта довольно велик. .

<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% от размера шрифта для span или div, в котором находится кнопка.

Могу ли я сделать это с чистым CSS?

Answer 1

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

Вы можете узнать больше о EM против REM в 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 в A List Apart

Answer 4

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