Как сделать размер шрифта меньше для 2px, чем родительский элемент?

Question

У меня есть два <span> s. Во-первых это font-size: 14px; и я хочу, чтобы уменьшить font-size от ребенка <span> для 2 px;

<span>14px font <span>12px span</span></span> 

Как это сделать без очевидно установка font-size: 12px;? Возможно ли это с помощью CSS? Или я должен использовать jQuery?

jsFiddle, конечно.

Answer 1

Если вы не возражаете, используя функцию с меньшими затратами, чем полную поддержку, я полагаю, вы могли бы использовать известково CSS3 (в) Например:

font-size: calc(100% - 2px);

Согласно спецификации пространства вокруг оператора. calc(100%-2px) может не работать.

К сожалению, это не работает на многих старых браузерах включая IE8 и IOS Safari < 6. Если вы хотите, чтобы поддержать их, Javascript решение, как Квентин или Zeaklous придумал это ваш лучший выбор.

Ссылки:

• http://www.sitepoint.com/css3-calc-function/
• http://css-tricks.com/a-couple-of-use-cases-for-calc/

Answer 2

Вы можете использовать JQuery/JavaScript, чтобы уменьшить размер шрифта детей охватывает, если они есть

$('span').each(function() { 
    if($(this).find('span')) { 
     $(this).children('span').css({'font-size':'-=2px'}); 
    } 
}) 

Преимущество этого подхода заключается в том, что все последующие уровень span сек размер шрифта уменьшается на 2px из значение их родителя (если это то, что вы ищете)

Demo of that here

Answer 3

CSS не имеет возможности, которые позволяют установку значения плюс или м inus несколько единиц длины. @Yumecosmos указывает, что современные браузеры поддерживают calc.

Вы можете использовать относительные единицы: font-size: 85%, но это не было бы 2px, за исключением случаев, когда размер родительского шрифта был 14px (и даже тогда он приблизительный).

Если вы хотите прочитать текущее значение, а затем вычесть 2px, то вы можете break out the JavaScript.

Answer 4

Для большей ясности вы можете предоставить свои классы пространств, чтобы вы могли более точно их настроить.

CSS:

.normal-text { 
    font-size: 14px; 
} 
.normal-text .small-text { 
    font-size: 12px; 
} 

HTML:

<span class="normal-text">L<span class="small-text">arger first letter!</span></span>