为什么“更轻”和“更粗”的字体粗细不起作用？答案

【问题标题】：Why won't 'lighter' and 'bolder' font weights work?为什么“更轻”和“更粗”的字体粗细不起作用？
【发布时间】：2018-04-05 00:24:19
【问题描述】：

我正在创建一个 Ionic 应用程序，我想使用自定义字体“Rubik”。我已经导入了“更轻”和“更粗”的字体粗细，但它们似乎不起作用——无论我在哪里添加样式，它都只使用正常的字体粗细。代码如下：

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Light.otf') format('opentype');
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Black.otf') format('opentype');
  font-weight: bolder;
  font-style: normal;
}

我也试过了：

@import url('https://fonts.googleapis.com/css?family=Rubik');

这些被放置在 variables.scss 文件中。目前，如果我像往常一样将它分配给一个新的字体系列，我只能使用更轻/更粗的字体。对于使用 ionic （roboto、noto-sans）安装的默认字体，更轻更粗的字体效果很好。有什么想法吗？

【问题讨论】：

我认为 font-weight 不再需要了，因为字体已经定义了权重。只需为每种字体使用一个唯一的名称就可以了

标签： html css angular fonts ionic2

【解决方案1】：

我会像这样导入/加载它，只获得所需的字体粗细：

<link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700,900" rel="stylesheet">

这样定义字体：

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Rubik';
  src: url('#{$font-path}/Rubik-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}

并像这样使用它：

h1 {
  font-family: 'Rubik', sans-serif;
  font-weight: 900;
}
h2 {
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
}

p {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
}

fig {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
}

您还可以在 scss 中创建函数/mixin 或定义变量以便更轻松地访问这些字体粗细，如下所示：

@mixin fontRubik($weight) {
  @if($weight == 'bold') {
     font-weight: 700;
  } @elseif($weight == 'black') {
     font-weight: 900;
  } @elseif($weight == 'light') {
     font-weight: 300;
  } @else {
     font-weight: 400;
  }
}

【讨论】：

【解决方案2】：

lighter 表示一个字体粗细比父元素轻（在字体的可用粗细中）。

bolder 表示一个字体粗细比父元素重（在字体的可用粗细中）。

它们是相对权重。

当你定义一个新的字体时，如果你为一个给定的权重定义它，那么它必须是一个绝对的权重。没有什么可以与之相关的。

这就是lighter 和bolder 未在valid values 中列出的原因以及your CSS will be reported as invalid 的原因。

【讨论】：