0

我有一些 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

.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，如果我将其删除并用虚拟类名替换它，则输出很好。

4

1 回答 1

1

@ScottS 在 此答案中建议的解决 方法是将.fontfacemixin 放入@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');
}

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

于 2012-12-12T12:50:51.500 回答