当以较少的嵌套级别导入时，Google字体将无法正常工作。 [英] Google Fonts won't work when imported at a less nested level.

问题描述

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

I'm using Google Fonts, and have imported it in less. Here is my code:

main.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 ，它。

This doesn't work. but if I put @import url(http://fonts.googleapis.com/css?family=Raleway:300); before #container, it does.

我猜这可能是因为路径，但我不知道为什么。

I'm guessing this maybe because of path, but I don't know why. How do I fix this?

推荐答案

@imports必须在CSS中的所有其他内容之前，我的意思是所有你的内容，甚至在@import标签之前放置注释将导致你的导入失败，所以一定要在你做任何事情之前做你的导入。 - http://www.cssnewbie.com/css-import-rule/#.UtNj1PQmnn8

"Your @imports must come before all other content in your CSS. And I mean all of your content. Even putting comments before the @import tag will cause your imports to fail. So be sure to do your imports before you do anything else." - http://www.cssnewbie.com/css-import-rule/#.UtNj1PQmnn8

直接来自W3C：

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

"Any @import rules must precede all other at-rules and style rules in a style sheet (besides @charset, which must be the first thing in the style sheet if it exists), or else the @import rule is invalid." - http://www.w3.org/TR/css3-cascade/#at-import

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

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

This demonstrates that when @import is not the first line of a stylesheet/embed, it does not work. Try putting the @import first line, you can see what happens:

#sidebar a { color: #f00; }

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

vs。只有：

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

这篇关于当以较少的嵌套级别导入时，Google字体将无法正常工作。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！