有没有办法说“使用当前字体重量”没有使它更轻/更大胆？ [英] Is there a way to say "use the current font weight" without making it lighter/bolder?

问题描述

font-weight 属性支持范围从100到900（包括100和900）的数值，以及关键字值如 normal 对应于400和粗体对应于700。

还有 bolder 和 lighter 值，这使得元素的字体重量分别比当前重量更大一些或更轻。

有没有办法说使用当前的体重？也就是说，我不想让这个元素的字体重量比它周围的文本更轻或更大 - 我想它是相同的。像这样，但假装 span 元素是一个 strong 元素（因为语义）：

  span {text-transform：uppercase;} header {font-weight：bold;}  

 < header> < h1>标题< / h1> < p>这是< span>标头< / span>。< / p>< / header>< footer> < p>这是一个< span>页脚< / span>。< / p>< / footer>   
 
 
我的目标是使用 strong 元素但没有默认 font-weight  style。
 
 
 
很明显， font-weight：normal  code> 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>标题< / h1> < p>这是< strong>标头< / strong>。< / p>< / header>< footer> < p>这是< strong>页脚< / strong>。< / p>< / footer>   
 
 
对于不熟悉 inherit 关键字或CSS继承的人来说，这可能不是很明显。但它的原因是因为 font-weight 像所有其他字体属性一样，是由自然继承的，事实上 bolder 和 lighter 关键字值基于继承的值。从规范：
 
 
 更大胆 
 
指定比继承值更大的权重。
 
 
 
 较轻 
 
指定比继承值更轻的权重。
 
 
使用 inherit 关键字指定继承的值不变。
 
 
 
 ）初始关键字具有与正常相同的效果，因为<$> c $ c> font-weight 属性，实际上是 normal 。然而，因为 font-weight 是继承的属性，所以属性默认为（当没有级联值时）继承而不是初始值正常  - 设置初始显式导致 初始的级联值，它会阻止继承，从而导致计算值为400。
 
The font-weight property supports numeric values ranging from 100 to 900 inclusive, and keyword values such as normal corresponding to 400 and bold corresponding to 700.

There's also the bolder and lighter values, which make an element's font weight one step bolder or lighter than the current weight, respectively.

Is there a way to say "use the current weight"? That is, I don't want to make the font weight of this element lighter or bolder than its surrounding text — I want it to be the same. Like this, but pretend the span element is really a strong element (because semantics):



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>





My goal is to use a strong element but without its default font-weight style.

Obviously font-weight: normal doesn't work, since as mentioned normal specifically corresponds to the numeric weight of 400. I tried font-weight: initial, but that seems to have the same effect as font-weight: normal.
解决方案
font-weight doesn't have a special keyword value for the "current weight". Instead, you use the CSS-wide inherit keyword to inherit the weight from the parent element (the element that contains the so-called "surrounding text" along with the element in question):



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>





This may not be obvious to those who aren't intimately familiar with the inherit keyword, or CSS inheritance in general. But the reason it works is because font-weight, like all other font properties, is inherited by nature, and in fact the bolder and lighter keyword values are based on the inherited value. From the spec:

  
bolder

  Specifies a bolder weight than the inherited value.
  
  
lighter

  Specifies a lighter weight than the inherited value.
So, it follows that one specifies the inherited value, unchanged, by using the inherit keyword.

The (also CSS-wide) initial keyword has the same effect as normal because the initial value of the font-weight property, as defined by the spec, is in fact normal. However, because font-weight is an inherited property, the property defaults to (for when there is no cascaded value) inheritance rather than the initial value of normal — setting initial explicitly results in a cascaded value of initial, which blocks inheritance, thereby resulting in a computed value of 400.

                        
这篇关于有没有办法说“使用当前字体重量”没有使它更轻/更大胆？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！