Gulp 如何导入at. woff2字体并在sass设置中使用它？

fkaflof6 于 2022-12-08 发布在 Gulp

关注(0)|答案(1)|浏览(161)

我有一个文件_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;

gulp

来源：https://stackoverflow.com/questions/69267704/how-to-import-at-woff2-font-and-use-it-in-a-sass-setting

1条答案

按热度按时间

cidc1ykv1#

您需要为每个字体变体编写单独的@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/en-US/docs/Web/CSS/@font-face

赞(0）回复(0）举报 2022-12-08

我来回答

Gulp 如何导入at. woff2字体并在sass设置中使用它？

1条答案

相关问题

热门标签

最新问答