Question

我正在创建一个Ionic应用程序，我想使用自定义字体＆＃39; Rubik＆＃39;。我已经进口了更轻的＆＃39;和更大胆的＆＃39;字体粗细，但它们似乎不起作用 - 无论我在哪里添加样式，它只使用正常的字体粗细。这是代码：

@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）安装的默认字体，更轻更大胆的工作。有什么想法吗？

Answer 1

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

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

他们是相对权重。

当您定义新的font-face时，如果您为给定的权重定义它，那么它必须是绝对权重。没有什么可以相对于。

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

Answer 2

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

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

像这样定义font-face：

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

为什么赢得“更轻”＆＃39;和更大胆的＆＃39;字体权重工作？

2 个答案: