font-weight属性支持从100到900的数值,以及关键字值,例如对应于400的正常值,对应于700的粗体。
还有更大更轻的值,这使得元素的字体重量分别比当前重量大一点或更轻。
有没有办法说“使用现在的体重”?也就是说,我不想使这个元素的字体重量比其周围的文本更轻或更大 – 我希望它是一样的。像这样,但假装span元素真的是一个强大的元素(因为语义):
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>
我的目标是使用强大的元素,但没有默认的font-weight风格。
显然font-weight:正常不起作用,因为正常提到的具体对应的是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是继承自然的,事实上,更大更轻的关键字值是基于继承的值。从spec:
bolder
Specifies a bolder weight than the inherited value.lighter
Specifies a lighter weight than the inherited value.
因此,通过使用inherit关键字来指定继承的值,不变。
(也是CSS宽)初始关键字与正常效果相同,因为由规范定义的font-weight属性的初始值实际上是正常的。然而,因为font-weight是一个继承的属性,所以属性默认为(当没有级联值时)继承而不是初始值正常初始化显式地导致初始值为cascaded value,这阻止继承,从而导致一个computed value的400。