所述font-weight
属性支持数字值从100到900以下,和关键字值例如对应于400 normal
和对应于700 bold
。
分别另外还有bolder
和lighter
值,这使一个元素的字体粗细一个步骤更大胆或轻于当前重量。
有没有办法说“使用当前权重”?也就是说,我不想让这个元素较轻或比其周围的文字更大胆的字体粗细 - 我想这是一样的。与此类似,但假装span
元素确实是一个strong
元素(因为语义):
span {
text-transform: uppercase;
}
header {
font-weight: bold;
}
<header>
<h1>Header</h1>
<p>This is a <span>header</span>.</p>
</header>
<footer>
<p>This is a <span>footer</span>.</p>
</footer>
我的目标是使用strong
元素,但没有它的默认font-weight
风格。
显然font-weight: normal
不起作用,因为如前所述normal
具体对应于400的数值权我试过font-weight: initial
,但似乎有作为font-weight: normal
同样的效果。
font-weight
没有“当前权重”的特殊关键字的值。相反,您可以使用CSS-宽inherit
关键字继承父元素的重量(包含与有问题的元素沿着所谓的“周围的文字”的元素):
strong {
font-weight: inherit;
text-transform: uppercase;
}
header {
font-weight: bold;
}
<header>
<h1>Header</h1>
<p>This is a <strong>header</strong>.</p>
</header>
<footer>
<p>This is a <strong>footer</strong>.</p>
</footer>
这可能不是很明显,对于谁是不是非常熟悉inherit
关键字,或一般CSS继承。但它的工作原理的原因是因为font-weight
,像所有其他字体属性,被自然继承,而事实上bolder
和lighter
关键字的值是基于继承值。从spec:
更大胆 指定比继承值更大胆的重量。
打火机 指定比继承值重量更轻。
因此,可以得出一个指定继承值,不变,使用inherit
关键字。
的(也CSS-宽)initial
关键字具有作为normal
相同的效果,因为font-weight
属性的初始值,如由规范定义的,实际上是在normal
。然而,由于font-weight
是一种遗传属性,属性默认为(用于当没有级联值)继承而非normal
的初始值 - 明确设置initial
导致cascaded value的initial
,其块继承,从而导致computed value 400。
我们也可以考虑价值unset
将表现为万一inherit
有从父元素继承了值,当没有值被继承将下降到initial
。
如果属性的级联值是
unset
关键字,则如果它是一个继承的属性,这是因为inherit
处理,并且如果不是的话,这将被视为initial
。此关键字可有效擦除所有申报值出现较早的级联,正确继承或不恰当的propertyref
strong {
font-weight: unset;
text-transform: uppercase;
}
header {
font-weight: bold;
}
<header>
<h1>Header</h1>
<p>This is a <strong>header</strong>.</p>
</header>
<footer>
<p>This is a <strong>footer</strong>.</p>
</footer>
值得大家注意的是这个值不在IE(https://caniuse.com/#feat=css-unset-value)支持(不是一个惊喜,虽然)