在手写笔 css 中循环 @font-face答案

【问题标题】：Looping @font-face in Stylus css在手写笔 css 中循环 @font-face
【发布时间】：2016-05-06 10:42:24
【问题描述】：

假设我这样声明一个哈希：

--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”而无法循环，而是抛出此错误：

预期“缩进”，得到“atrule font-face”

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

【问题讨论】：

标签： javascript html css fonts stylus

【解决方案1】：

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

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

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

【讨论】：