如何使2xx的字体大小比父元素少？

Question

我有两个<span>个。首先是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的calc（）例如：

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

根据规范，操作员周围的空间是必要的。 calc(100%-2px)可能无效。

不幸的是，这不适用于很多旧版浏览器，包括IE8和iOS Safari＆lt; 6.如果你想支持它们，像Quentin或Zeaklous这样的javascript解决方案是你最好的选择。

参考文献：

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

Answer 2

CSS没有允许设置值加上或减去多个长度单位的功能。 @Yumecosmos指出现代浏览器支持calc。

您可以使用相对单位：font-size: 85%，但除非父字体大小为2px（即使它是近似值），否则不会14px。< / p>

如果您想要读取当前值，然后从中减去2px，那么您可以break out the JavaScript。

Answer 3

你可以使用jQuery / javascript来减少子跨度的字体大小

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

这种方法的优势在于span字体大小的所有后续级别都会从父级的值减少2px（如果这就是您要查找的内容）

Demo of that here

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>