Question

我有一点LESS mixin来简化字体外观

.fontface(@font){
    @font-face {
        font-family: '@{font}';
        src: url('../fonts/@{font}.eot');
        src: local('☺'), url('../fonts/@{font}.woff') format('woff'), url('../fonts/@{font}.ttf') format('truetype'), url('../fonts/@{font}.svg#webfont5SwbW1jA') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

在我的本地计算机（OS / X）上，运行lessc on

.fontface(@font){
    @font-face {
        font-family: '@{font}';
        src: url('../fonts/@{font}.eot');
        src: local('☺'), url('../fonts/@{font}.woff') format('woff'), url('../fonts/@{font}.ttf') format('truetype'), url('../fonts/@{font}.svg#webfont5SwbW1jA') format('svg');
        font-weight: normal;
        font-style: normal;
    }
}

.fontface('MyFont');
.fontface('MyOtherFont');

返回

@font-face {
  font-family: 'MyFont';
  src: url('../fonts/MyFont.eot');
  src: local('☺'), url('../fonts/MyFont.woff') format('woff'), url('../fonts/MyFont.ttf') format('truetype'), url('../fonts/MyFont.svg#webfont5SwbW1jA') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MyOtherFont';
  src: url('../fonts/MyOtherFont.eot');
  src: local('☺'), url('../fonts/MyOtherFont.woff') format('woff'), url('../fonts/MyOtherFont.ttf') format('truetype'), url('../fonts/MyOtherFont.svg#webfont5SwbW1jA') format('svg');
  font-weight: normal;
  font-style: normal;
}

然而，在我们的构建服务器（CentOS 6.2）上运行它会返回

@font-face {
  font-family: 'MyFont';
  src: url('../fonts/MyFont.eot');
  src: local('☺'), url('../fonts/MyFont.woff') format('woff'), url('../fonts/MyFont.ttf') format('truetype'), url('../fonts/MyFont.svg#webfont5SwbW1jA') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'MyFont';
  src: url('../fonts/MyFont.eot');
  src: local('☺'), url('../fonts/MyFont.woff') format('woff'), url('../fonts/MyFont.ttf') format('truetype'), url('../fonts/MyFont.svg#webfont5SwbW1jA') format('svg');
  font-weight: normal;
  font-style: normal;
}

为什么两个mixin在我们的构建服务器上返回相同但在本地工作正常？

两台计算机报告的版本相同。

Sams-MacBook-Pro:Desktop sr$ lessc -v
lessc 1.3.0 (LESS Compiler) [JavaScript]


[sr@egdjnk01 ~]$ lessc -v
lessc 1.3.0 (LESS Compiler) [JavaScript]

我在两者上都运行npm -g update less，但我仍然会收到不同的行为。

我认为这与@font-face有关，如果我删除它并用虚拟类名替换它，输出就可以了。

Answer 1

目前的解决方案，由@ScottS建议 this answer ，是将.fontface mixin置于手动定义的@font-face块内，如此

.fontface(@font){
    font-family: '@{font}';
    src: url('../fonts/@{font}.eot');
    src: local('☺'), url('../fonts/@{font}.woff') format('woff'), url('../fonts/@{font}.ttf') format('truetype'), url('../fonts/@{font}.svg#webfont5SwbW1jA') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    .fontface('MyFont');
}

@font-face{
    .fontface('MyOtherFont');
}

现在提供两个编译器的正确输出。

LESSC @ font-face错误

1 个答案: