css - 字体混合在使用时不打印样式

Question

我有以下文件夹结构:

style.scss 看起来像这样:

@import "mixins.scss";
@import "theme/**.scss";

style.scss 中的所有内容都在 theme.min.css 中编译。

在 _mixin.scss 中，我有一个用于 font-face 的 mixin:

@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
  @font-face {
    font-family: quote($font-name);
    src: url($file-name + '.eot');
    src: url($file-name + '.eot?#iefix')  format('embedded-opentype'),
    url($file-name + '.otf') format('otf'),
    url($file-name + '.woff') format('woff'),
    url($file-name + '.woff2') format('woff2'),
    url($file-name + '.ttf')  format('truetype'),
    url($file-name + '.svg##{$font-name}')  format('svg');
    font-weight: $weight;
    font-style: $style;
    font-display: swap;
  }
}

@mixin lemonmilk-bold{
  @include font-face("lemonmilk", "/assets/build/fonts/lemon-milk/bold/lemonmilk-bold", $style: normal, $weight: normal);
}

在 _typography.scss 中，我有以下内容:

h1{
  @include lemonmilk-bold;
}

但是，字体样式不适用于前端？

我认为这可能与文件夹路径有关(因为所有样式都被编译为 theme.min.css)。但是，改变路径对我也没有任何作用。

不确定我哪里出错了？

Answer 1

主要问题似乎是 @font-face 不应该放入 CSS 选择器中。相反，@font-face 独立存在，您可以将它与 font-family 一起使用。

应该这样使用:

@font-face{
    font-family: fishes;
    src: url(/path/to/file);
    font-weight: 400;
}

h1{
    font-family:fishes;
}

但是，您的代码似乎被错误地编译成了:

h1{
    @font-face{
        font-family: fishes;
        src: url(/path/to/file);
        font-weight: 400;
    }
}

这是无效的 CSS。

相反，您可能应该这样做:

//Beginning of CSS file.
@include font-face("lemonmilk", "/assets/build/fonts/lemon-milk/bold/lemonmilk-bold", $style: normal, $weight: normal);

...
...
...

h1{
    font-family:lemonmilk;
    font-weight:normal;
}

并删除@mixin lemonmilk-bold。