我有以下文件夹结构:
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
)。但是,改变路径对我也没有任何作用。
不确定我哪里出错了?
最佳答案
主要问题似乎是 @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
。
关于css - 字体混合在使用时不打印样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64947557/