Font-weight 未应用

Question

我面临 css font-weight 问题。我有一个网站，我想在其中减少 font-weight 但即使是最轻的重量，它似乎也是固定的，即 100 看起来像这样。

但我希望它看起来像这样我使用的字体是Merriweather-Sans

我的 css 文件 1，其中包含与 body 相关的 css 和标题：

body {
  font-size: $font-size-base;
  line-height: line-height($font-size-base);
  color: $color-black;
}

h1 {
  font-size: $font-size-h1;
  line-height: line-height($font-size-h1);
  margin-bottom: $spacer;
  font-weight: 100;
  color: $color-slate;
}

h2 {
  font-size: $font-size-h2;
  line-height: line-height($font-size-h2);
  font-weight: $font-weight-light;
  color: $color-crimson;
  margin-bottom: $spacer;
  color: $color-slate;
  text-transform: capitalize;
}

h3 {
  font-size: $font-size-h3;
  line-height: line-height($font-size-h3);
  font-weight: $font-weight-normal;
  margin-bottom: $spacer;
  color: $color-slate;
}

h4 {
  font-size: $font-size-h4;
  line-height: line-height($font-size-h4);
  margin-bottom: $spacer;
}

p {
  font-size: $font-size-base;
  line-height: line-height($font-size-base);
  margin-bottom: $spacer;
  color: $color-slate;
}

我的 css 文件 2 包含上面 css 中声明的变量：

/* === Typography === */
@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans');

$font-family-base: 'Merriweather Sans', sans-serif;

$font-size-base: 1rem;
$font-size-h1: $font-size-base * 3;
$font-size-h2: $font-size-base * 2;
$font-size-h3: $font-size-base * 1.75;
$font-size-h4: $font-size-base * 1.25;
$font-size-lead: $font-size-base * 1.25;
$font-size-small: $font-size-base * 0.875;

$font-weight-light: 200;
$font-weight-normal: 400;
$font-weight-bold: 700;

/* === Line height === */

$line-height-list: 1.5rem;

Answer 1

这个导入 https://fonts.googleapis.com/css?family=Merriweather+Sans 只包含 font-weight 400，我想这就是原因。

并且该字体只支持字体粗细300-800https://fonts.google.com/specimen/Merriweather+Sans?query=Merriweather

你可以像这样导入使用字体粗细 300-800

@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;500;600;700;800&display=swap');

Answer 2

如果您想使用 Merriweather 的多种字重，最好导入可变字体而不是六个静态字重：

@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300..800&display=swap');

如果您想在 Google 字体中查找重量很轻的字体，请尝试将“粗细”设置为较低的值进行过滤：

https://fonts.google.com/?thickness=1

Font-weight 未应用

Font-weight not being applied

html

css

reactjs

fonts