当我使用 css 变量时，font-family 没有被应用

Question

我正在尝试使用 css 变量设置页面的字体系列。这是一段代码：

/* font-family: 'Poppins' sans-serif; */
/* - Very Dark Blue: hsl(234, 12%, 34%)
- Grayish Blue: hsl(229, 6%, 66%)
- Very Light Gray: hsl(0, 0%, 98%) */

:root {
  --ff-sans: "Poppins" sans-serif;

  --fw-light: 200;
  --fw-regular: 400;
  --fw-bold: 600;

  --fs-400: 0.9275rem;
  --fs-500: 1.25rem;
  --fs-600: 1.625rem;
  --fs-900: 2.5rem;

  --clr-neutral-900: hsl(234, 12%, 34%);
  --clr-neutral-400: hsl(229, 6%, 66%);
  --clr-neutral-100: hsl(0, 0%, 98%);

  --clr-teal: hsl(180, 58%, 56%);
  --clr-red: hsl(0, 70%, 60%);
  --clr-blue: hsl(212, 86%, 64%);
  --clr-yellow: hsl(34, 97%, 64%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
  line-height: 1.7;
  color: var(--clr-neutral-400);
}

body {
  margin: 0;
}

h1,
h2,
h3 {
  line-height: 1.1;
  color: var(--clr-neutral-900);
}

字体系列没有被更改，我什至检查了网络选项卡以查看字体是否正在下载，确实如此。如果我尝试将其设置为特定元素，它就会起作用。我该如何解决这个问题？

Answer 1

在您的代码中，您以错误的方式调用了字体系列。更改并使用以下字体系列代码并查看您的输出。

:root {
    --ff-sans: "Poppins", sans-serif;
}

Answer 2

这可能是因为

/* font-family: 'Poppins' sans-serif; */

中的语法错误。您必须用逗号分隔备份字体，如下所示：

:root { --ff-poppins: 'Poppins', sans-serif }