在VueJS中编写动态@fontface CSS

Question

我目前正在VueJS上使用Nuxt重建我的类型铸造厂的网站，并试图最小化CSS的编写量。

特别是，我想直接从后端提供的数据中生成所有@fontface CSS。 假设我的数据是

{
 fontData: 
   fontName: name
   fontWoff: /path
   fontWeight: 400
}

有没有一种方法可以在具有动态字体的.vue组件内生成样式标签？

@fontface {
 font-family: {{ fontData.fontName }};
 src: {{ fontData.fontWoff }};
 font-weight: {{ fontData.fontWeight }};
}

可能的工作方式是什么？ 试图避免每次我们在后端添加新字体时都必须写新的@fontfaces。

谢谢！