Question

我最近开始使用SASS，我想导入2种字体，蒙特塞拉特和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")

SASS-字体无法正确使用

1 个答案: