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

我有两个

s。首先是

字体大小：14px

我想减少

子
的
字体大小，以
2px

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

14px字体12px跨度

如何在没有明显设置的情况下执行此操作
字体大小：12px？是否可以使用CSS？还是应该使用jQuery

当然。
您可以使用jQuery/javascript来减小子span的字体大小（如果有的话）

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

这种方法的优点是，所有后续级别的
span
s字体大小都比其父级的值减少
2px
（如果您正在寻找的话）

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

您可以使用相对单位：
font size:85%
，但这不会是
2px
，除非父字体大小为
14px
（即使是这样，也是近似值）

如果您想读取当前值，然后从中减去2px，那么您可以。
为了清晰起见，您可能需要为您的spans类指定一个更具意义的目标

CSS:

HTML:

较大的第一个字母！
如果您不介意使用不完全支持的功能，我相信您可以使用CSS3的calc（），例如：

字体大小：calc（100%-2px）

根据规范，操作员周围的空间是必要的<代码>计算（100%-2px）
可能不起作用

不幸的是，这在很多旧浏览器上都不起作用，包括IE8和iOS Safari<6。如果你想支持它们，像昆汀或泽克洛斯这样的javascript解决方案是你最好的选择

参考文献：




+1-对于CSS中的相对单位，我建议使用em vs%，但这是对+1问题的准确回答，我也会这样做。
.normal-text {
    font-size: 14px;
}
.normal-text .small-text {
    font-size: 12px;
}

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