Google Web Fonts 不适用于嵌套的 LESS答案

【问题标题】：Google Web Fonts not working with nested LESSGoogle Web Fonts 不适用于嵌套的 LESS
【发布时间】：2017-03-04 11:19:16
【问题描述】：

已经发布的关于这个主题的问题没有解决我的问题：

我正在尝试在使用 LESS 预处理器编译 CSS 的 Bootstrap 网站中使用 Google Web Fonts。我在frontend.less 顶部导入所有相关样式表，如下所示：

@import 'base.less'; 
@import '/bower_components/fontawesome/less/font-awesome.less';
@import (less) '/app/assets/less/superslides.css';
@import url(http://fonts.googleapis.com/css?family=Dancing+Script);

我目前只能将 Web 字体应用于全局、非嵌套级别的标签，如下所示：

h2 {
font-family: 'Dancing Script', cursive;
}

但是，当我尝试在特定 div（如 #slideshow）内的所有 h2-tags 上使用“Dancing Script”时，网络字体不起作用，例如：

#slideshow {

h2 { font-family: 'Dancing Script', cursive;
   }
}

或

#slideshow h2 { font-family: 'Dancing Script', cursive;
    }

这是一个错误还是您如何正确地将字体类型应用于嵌套的 LESS？

【问题讨论】：

您是在浏览器中使用LESS.js 编译器，还是在lessphp 或Prepros、Mixture 等预处理器中使用？您可以通过添加background: pink 之类的内容来明确应用选择器#slideshow h2 的规则，以进行调试（我发现这种颜色很有用，因为它还没有出现在我的项目中。只是过去的“笑话”同事6个月... ^^)
我使用 Grunt.js 作为少编译器。只是尝试在 id 上应用不同的颜色，这很有效。但是，网络字体似乎无法正确加载。我认为这是 LESS 中的一个 url-bug。
为 Grunt 着称。然后，您可以通过搜索选择器 #slideshow h2 来验证编译后的 CSS 是否存在错误，并看到是的，可能字符串需要使用 ~" your str'ing" 进行转义。我自己托管这些字体，因此可以在没有任何空格的情况下命名它们，更简单^^
看到这个工作codepen。所以问题出在其他地方（不是在 Less 中，也不是在嵌套中）。

标签： css twitter-bootstrap fonts less webfonts

【解决方案1】：

在使用CodeKit 编译时，我有这个嵌套的 webfont less 文件工作

@import url(http://fonts.googleapis.com/css?family=Dancing+Script);

#custom{
    h2{
        font-family:'Dancing Script';
    }
}

不嵌套时也可以使用

@import url(http://fonts.googleapis.com/css?family=Dancing+Script);

#custom h2{
        font-family:'Dancing Script';
    }

当我用LESS 编译它时，我没有看到任何理由认为LESS 本身存在错误。

我过去注意到的一个想法是，所有编译器都不相同，有些编译器会咳嗽而死，而其他编译器不会，或者有些编译器不能正确编译。

祝你好运

【讨论】：

【解决方案2】：

我通过 Gulp 使用 LESS 时遇到了同样的问题。

所以。比如……

当我在 .less 文件中使用代码时...

@import url('https://fonts.googleapis.com/css?family=Oswald')

我们希望在我的最终 .css 文件中得到如下的答案（导入的代码）：

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
}

问题从这里开始：@font-face。

就我而言，通过 Gulp 的 LESS 没有将其包含在我的代码中。

在您编译的代码中寻找它。可能你的也不见了。

顺便说一句。我不知道如何修复我的 LESS 代码。

相反，我将导入命令直接用于我的 HTML 文件，如下所示：

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

不像预期的那样，但它有效。

祝你好运。

【讨论】：