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

debugcn 发表于 Dev

亚瑟

我正在创建一个 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) 安装的默认字体，更轻、更粗的字体效果很好。有任何想法吗？

短剑

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

<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;
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。