less font-face src url 包含字体系列答案

【问题标题】：Less font-face src url contains font familyless font-face src url 包含字体系列
【发布时间】：2015-10-21 19:20:35
【问题描述】：

我只是继承了一个应用程序，而less变量文件设置如下。

@icon-font-path:          "../fonts/";
@exampleFont: exampleFont, 'Helvetica Neue', Helvetica, Arial, sans-   serif;

@font-face {
  font-family: exampleFont; 
  src: url('@{icon-font-path}@{exampleFont}.ttf') format('truetype'); 
  font-weight: normal;
  font-style: normal;
}

编译的 CSS

@font-face {
  font-family: exampleFont;
  src: url('../fonts/exampleFont, 'Helvetica Neue', Helvetica, Arial, sans-serif.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;

}

有谁知道为什么 src url 包含 url AND 字体系列，并且在编译时它结合了两者并且仍然有效？我以前从未见过这样做过。

【问题讨论】：

标签： less font-face

【解决方案1】：

src 应该是 src: url('@{icon-font-path}exampleFont.ttf') format('truetype');

在当前代码中，它有@{exampleFont}，它将扩展为变量的值。

【讨论】：

【解决方案2】：

这是一个关于如何在 LESS 中为字体使用 mixin 的工作示例：

https://github.com/MarcoHengstenberg/helpCSS/blob/master/help.css#L528-L547

在第 533 行，您必须将粗细和样式替换为常规字体的实际值（400，正常）。

【讨论】：