css - SASS - 字体不适合正确的路径

Question

我最近开始使用 SASS，我想导入 2 种字体，Montserrat 和 Open Sans。通常在 CSS 中，您会按照以下方式做一些事情

@font-face {
    font-family: 'Montserrat'
    src: url('../../webfonts/Montserrat.ttf');
}

而且效果很好。如果我的文件结构如下所示

CSS
   Base
     typography.sass
Webfonts
   Montserrat.ttf

但我将以下代码放入我的 SASS 文件中。

@font-face
  font-family: 'Montserrat'
  src: url("../../webfonts/Montserrat.ttf")

@font-face
  font-family: 'Open Sans'
  src: url("../../webfonts/OpenSans.ttf")
  src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")

但是字体没有加载。我在这个主题上尝试过类似的问题，但没有一个对我来说是成功的。这个问题可能是什么？

Answer 1

如果您的文件夹名称是 Webfonts 并且您使用 url("../../webfonts/... 引用它，那么您的答案就在那里 (小写与大写 w/W)。

此外，您的代码示例会产生一个双 src 属性。不知道是不是跟问题有关。

@font-face
  font-family: 'Open Sans'
  src: url("../../webfonts/OpenSans.ttf")
  src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")

上面的代码编译成这样，其中 src 每次都会覆盖自己:

@font-face {
  font-family: "Open Sans";
  src: url("../../webfonts/OpenSans.ttf");
  src: url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype");
}

src 属性应该只设置一次，而是设置多个值。我认为这适用于 Sass:

@font-face
  font-family: 'Open Sans'
  src: url("../../webfonts/OpenSans.ttf"), url("../../webfonts/OpenSans.ttf?iefix") format("embedded-opentype")