如何使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 <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(即使它是近似值)时也不会这样.

如果你想读取当前值,然后从中减去2px,那么你可以打破JavaScript.