Question

已经有一些关于cssless和font-face问题的讨论，例如：How we can use @font-face in 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），它看起来就像你希望的那样。它的细微差别，但是有区别。

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

你能够解决这个问题的唯一方法是使用@arguments，但它可能需要的代码与写出单独的@ font-face语句一样多。由于@ font-face在技术上本身就是一个选择器，因此它总是以一种将引用它的变量视为全局的方式使用。

如何使用cssless的font-face？

1 个答案: