有没有办法说“使用当前字体粗细”没有使它更轻/更大胆?

问题描述 投票:18回答:2

所述font-weight属性支持数字值从100到900以下,和关键字值例如对应于400 normal和对应于700 bold

分别另外还有bolderlighter值,这使一个元素的字体粗细一个步骤更大胆或轻于当前重量。

有没有办法说“使用当前权重”?也就是说,我不想让这个元素较轻或比其周围的文字更大胆的字体粗细 - 我想这是一样的。与此类似,但假装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同样的效果。

css fonts
2个回答
12
投票

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,像所有其他字体属性,被自然继承,而事实上bolderlighter关键字的值是基于继承值。从spec

更大胆 指定比继承值更大胆的重量。

打火机 指定比继承值重量更轻。

因此,可以得出一个指定继承值,不变,使用inherit关键字。

的(也CSS-宽)initial关键字具有作为normal相同的效果,因为font-weight属性的初始值,如由规范定义的,实际上是在normal。然而,由于font-weight是一种遗传属性,属性默认为(用于当没有级联值)继承而非normal的初始值 - 明确设置initial导致cascaded valueinitial,其块继承,从而导致computed value 400。


0
投票

我们也可以考虑价值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)支持(不是一个惊喜,虽然)

© www.soinside.com 2019 - 2024. All rights reserved.