Question

我刚刚继承了一个应用程序，并且变量较小的文件设置如下。

@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和字体系列，当它被编译时，它结合了两者并仍然有效？我以前从未见过这样做过。

Answer 1

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

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

Answer 2

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

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

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

较少的font-face src url包含字体系列

2 个答案: