使用时字体的 Mixin 不是打印样式答案

【问题标题】：Mixin for font-face isn't printing styles when used使用时字体的 Mixin 不是打印样式
【发布时间】：2020-11-26 18:34:07
【问题描述】：

我有以下文件夹结构：

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）。但是，改变路径对我也没有任何作用。

不确定我哪里出错了？

【问题讨论】：

文件夹路径似乎没有问题。但如果是，您可以通过查看浏览器的 Network 选项卡中是否有任何 404 错误来轻松检查它。
这个问题解决了吗？如果是这样，并且任何答案对您有帮助，请将其中一个标记为“已接受”。否则，如果您需要更多说明或仍有问题，请直接说出来。

标签： css sass font-face mixins

【解决方案1】：

您的问题可能比您想象的要简单。字体声明需要出现在页面上的任何其他 CSS 选择器之前。

像这样：

@font-face{
  font-family: 'Your Font;;
  src: url(/var/fonts/yourfont.woff);
  font-weight: 500;
}

body{
  margin: 0;
}

/* more CSS code */

不是这个：

/* Code before the font face declaration */
body{
  margin: 0;
}

@font-face{
  font-family: 'Your Font;;
  src: url(/var/fonts/yourfont.woff);
  font-weight: 500;
}

/* more CSS code */

【讨论】：

【解决方案2】：

主要问题似乎是 @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。

【讨论】：