我的字体速记不起作用,其中包括字体大小和字体粗细

时间:2019-06-12 03:14:35

标签: html css frontend font-size shorthand

在我的代码中,我使用

{
    font-size: 2.5rem;
    font-weight: 100;
}

设置字体,但是当我将其切换为字体简写时,例如{font: 100 2.5rem} 似乎不起作用,我的字体样式更改为默认字体。

pic 看来我已经遵循了字体的速记规则,有人可以帮忙吗?

2 个答案:

答案 0 :(得分:-1)

字体粗细定义从细到粗的字符。 100-400 与普通字符相同, 700-900 与粗体字符相同。赋予Font-weight之后,您需要赋予font-family属性。如果您不想使用任何字体系列,则只需将字体系列都不使用。这对我有用。

<!DOCTYPE html>
<html>
<head>
<style>
  p.a {
    font: 100 2.5rem none;
  }
  p.b {
    font: 400 2.5rem none;
  }
  p.c {
    font: 700 2.5rem arial, sans-serif;
  }
  p.d {
    font: 800 2.5rem Georgia, serif;
  }
  p.e {
    font: 900 2.5rem normal;
  }
</style>
</head>
<body>

  <h1>The font Property</h1>

  <p class="a">This is a paragraph. The font size is set to 10 pixels.</p>

  <p class="b">This is a paragraph. The font size is set to 10 pixels.</p>

  <p class="c">This is a paragraph. The font size is set to 10 pixels.</p>

  <p class="d">This is a paragraph. The font size is set to 10 pixels.</p>

  <p class="e">This is a paragraph. The font size is set to 10 pixels.</p>

</body>
</html>

答案 1 :(得分:-1)

font的简写属性要求指定font-sizefont-familyline-height和其他font-*属性是可选的。

Reference.