LESSC @font-face错误

Question

我使用了更少的混入来简化字体

.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

.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;
}

为什么这两个mixins在我们的构建服务器上返回相同的结果，但在本地工作得很好？

两台计算机都报告了相同的较低版本。

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混合放在手动定义的@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');
}

它现在给出了来自两个编译器的正确输出。