在 Stylus 中循环 @font-face css

Question

假设我这样声明一个散列：

--font = {
    open-sans: "OpenSans",
    bebas-neue: "BebasNeue",
    uni-sans-thin: "UniSansThin",
    uni-sans-heavy: "UniSansHeavy",
    uni-sans-thin-italic: "UniSansThinItalic",
    uni-sans-heavy-italic: "UniSansHeavyItalic",
}

我想知道是否有一种方法可以遍历字体并对它们进行@font-face。

这是一个示例实现：

for key, value in --font
  @font-face
    font-family: value
    src: url("../assets/fonts/" + {key} + ".otf") format("opentype")

但是这不起作用，我的猜测是手写笔无法循环，因为“@font-face”反而会抛出此错误：

expected "indent", got "atrule font-face"

我的问题是这是否可能，如果不可能还有其他方法吗？这样做的原因是因为我想尽可能地干。

Answer 1

真的想通了。我做错了插值。应该是这样的：

for key, value in --font
    @font-face
        font-family: value
        src: url("../assets/fonts/" + value + ".otf") format("opentype")

而且我还使用了空格而不是实际的制表符，这导致了我的问题。我真的很高兴看到这是可能的！

在 Stylus 中循环 @font-face css

Looping @font-face in Stylus css

html

javascript

css

fonts

stylus