如何导入.woff2字体并在Sass设置中使用？

Question

如何导入.woff2字体并在Sass设置中使用？

3

我有一个名为_variables.scss的文件，它是使用gulp设定的sass的一部分。

在这个文件中，我可以按如下方式导入Google字体:

$font: "https://fonts.googleapis.com/css?family=Nunito:300,400,600,700" !default;
$font-family-custom-sans-serif: "Nunito", sans-serif !default;
$font-family-base: $font-family-custom-sans-serif !default;

我现在正在尝试使用来自 .woff2 文件的自定义导入替换此字体。我尝试了以下方法，但似乎不起作用：

@font-face {
  font-family: 'Gellix';
  src:  url("../../assets/img/brand/Gellix-Bold.woff2") format('woff2'),
        url("../../assets/img/brand/Gellix-Regular.woff2") format('woff2')
}

$font: "Gellix", sans-serif !default;
$font-family-custom-sans-serif: "Gellix", sans-serif !default;
$font-family-base: $font-family-custom-sans-serif !default;

- JohnAndrews

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleh Martemianov · Accepted Answer

你需要为每个字体变量编写单独的@font-face样式。

在你的情况下，它应该长这样：

@font-face {
  font-family: 'Gellix';
  font-weight: 400;
  font-style: normal;
  src: url("../../assets/img/brand/Gellix-Regular.woff2") format('woff2');
}
@font-face {
  font-family: 'Gellix';
  font-weight: 700;
  font-style: normal;
  src: url("../../assets/img/brand/Gellix-Bold.woff2") format('woff2');
}

然后检查浏览器控制台，看看你指定的路径是否正确

更多信息请参见：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face