当以较少的嵌套级别导入时，Google 字体将不起作用。

Question

我正在使用 Google 字体，并已将其导入 less。这是我的代码：

main.less

#container {
  @import url(http://fonts.googleapis.com/css?family=Raleway:300);
  .like {
    font-family: 'Raleway', sans-serif;
  }
}

这不起作用。但如果我将@import url(http://fonts.googleapis.com/css?family=Raleway:300); 放在#container 之前，它确实如此。

我猜这可能是因为路径，但我不知道为什么。我该如何解决这个问题？

Answer 1

“您的@imports 必须在您的CSS 中的所有其他内容之前。我的意思是您的所有内容。即使将cmets 放在@import 标记之前也会导致您的导入失败。所以请务必在导入之前进行还要别的吗。” - http://www.cssnewbie.com/css-import-rule/#.UtNj1PQmnn8

直接来自 W3C：

"任何@import 规则必须在样式表中的所有其他at 规则和样式规则之前（除了@charset，如果它存在，它必须是样式表中的第一件事），否则@import规则无效。” - http://www.w3.org/TR/css3-cascade/#at-import

这是一个小提琴：http://jsfiddle.net/setek/5QsvU/

这表明当@import 不是样式表/嵌入的第一行时，它不起作用。尝试将@import 放在第一行，您可以看到会发生什么：

#sidebar a { color: #f00; }

@import url('http://jsfiddle.net/css/screen.css?jobofferinsidebar');

对比只是：

@import url('http://jsfiddle.net/css/screen.css?jobofferinsidebar');