如何使用cssless的font-face？

Question

已经有一些关于cssless和font-face问题的讨论了,比如这里:我们如何在Less中使用@ font-face

但这个问题似乎是另一个问题,我想知道是否有人找到了解决方法？我认为我的语法较少是正确的.

如果我写下面的内容:

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

它只需要第一个变量.我想知道是不是因为它们没有在元素内部调用 - 尽管我也尝试在元素内部调用它,结果相同.

你如何使用font-face的cssless？

谢谢.

Answer 1

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

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

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

实现这一目标的唯一方法是使用 @arguments，但它可能需要与编写单个 @font-face 语句一样多的代码。由于 @font-face 从技术上来说本身就是一个选择器，因此它的使用方式始终将引用它的变量视为全局变量。