css - 如何在 cssless 中使用 font-face？

Question

已经有一些关于 cssless 和 font-face 问题的讨论，例如这里:How we can use @font-face in Less

但是这个问题似乎是另一个问题，我想知道是否有人找到了解决方法？不过，我认为我的 less 语法是正确的。

如果我这样写:

.setFont (@fontName) {
    @font-face {
        font-family: '@{fontName}';
        src: url('../fonts/@{fontName}.eot'); 
        src: url('../fonts/@{fontName}.eot?#iefix') format('embedded-opentype'), 
        url('../fonts/@{fontName}.ttf')  format('truetype');
    }
}
.setFont ('myfont1');   
.setFont ('myfont2');   
.setFont ('myfont3');

输出结果如下:

@font-face {
  font-family: 'myfont1';
  src: url('../fonts/myfont1.eot');
  src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'),
  url('../fonts/myfont1.ttf') format('truetype');
}
@font-face {
  font-family: 'myfont1';
  src: url('../fonts/myfont1.eot');
  src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'),
  url('../fonts/myfont1.ttf') format('truetype');
}
@font-face {
  font-family: 'myfont1';
  src: url('../fonts/myfont1.eot');
  src: url('../fonts/myfont1.eot?#iefix') format('embedded-opentype'),
  url('../fonts/myfont1.ttf') format('truetype');
}

它只取第一个变量。我想知道这是否是因为它们没有在元素内部调用 - 尽管我也尝试在元素内部调用它，结果相同。

如何将 cssless 与 font-face 结合使用？

谢谢。

Answer 1

这样做是因为变量在技术上不是 LESS 中的变量而是常量，因此不能重新定义。

所以当你第一次定义@fontName时，不能重新定义。这就是为什么你得到重复的原因。不幸的是，您不能像使用参数一样使用它们(例如设置 border-radius(@radius)，这看起来就像您希望做的那样。虽然细微差别，但还是有区别的。

您使用它的方式是作为一个变量(常量)，您想要使用它但不能使用它的方式是作为一个参数混合。如果在范围方面更容易考虑它。在这种情况下，您设置的是全局变量，而不是该特定选择器的局部变量。例如，当您设置 border-radius 时，您是在选择器中设置它，从而使其成为该选择器的局部变量。在上面的示例中，您没有将 .setFont 应用于选择器，它可以用作局部变量，而是将其设置为全局变量。

您可能能够完成此操作的唯一方法是使用@arguments，但它可能需要与编写单独的@font-face 语句一样多的代码。由于 @font-face 在技术上本身就是一个选择器，因此它的使用方式总是将引用它的变量视为全局变量。