如何使2px的字体大小小于父元素？

Question

我有两个<span>，第一个是font-size: 14px;，我想减少儿童font-size <span> for 2 px;

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

如何在不使用设置的情况下实现font-size: 12px;？用CSS可以吗？还是我应该使用jQuery？

当然是jsFiddle。

Answer 1

如果您不介意使用支持不足的特性，我相信您可以使用CSS3 3的calc()，例如：

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

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

不幸的是，--这并不适用于许多较老的浏览器，包括IE8和iOS Safari < 6。如果您想要支持它们，那么Quentin或Zeaklous这样的javascript解决方案是最好的选择。

参考资料：

• 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从其父级的值中减少(如果这是您想要的)

这里的演示

Answer 3

为了清晰起见，您可能希望给您的跨类，以便您可以更有意义地针对它们。

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>