Astro中动态加载未知数量Webfonts的实现问题

架构老林

2026-7-29

在Astro中动态加载未知数量WebFont的正确方式

问题原因

你遇到的问题本质是Astro的模板解析规则导致的：

直接在<style>标签内使用{fonts}时，Astro会将其当作CSS语法处理，而CSS不支持模板变量，因此触发"unknown word"错误。
若未使用正确的渲染指令，Astro会自动转义字符串内容，导致CSS代码被当作纯文本输出，而非生效的样式。

解决方案一：使用`set:html`渲染原始CSS字符串

这是最简洁的方案，利用Astro的set:html指令直接将生成的CSS字符串注入到<style>标签中，绕过CSS语法解析的限制：

---
function getFonts() {
    return global.font.map(item => `
@font-face {
    font-family: ${item.name};
    src: url(${item.url2}) format('woff2'),
         url(${item.url1}) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
`).join('\n');
}

const fonts = getFonts();
---

<head>
  <!-- 使用set:html指令渲染原始CSS -->
  <style set:html={fonts}></style>
</head>

解决方案二：动态创建Style元素（备选）

如果需要更灵活的控制，可以通过内联脚本动态创建样式元素并插入到页面头部：

---
const fontList = global.font;
---

<head>
  <script is:inline>
    const styleEl = document.createElement('style');
    styleEl.textContent = `
      ${fontList.map(item => `
@font-face {
    font-family: ${item.name};
    src: url(${item.url2}) format('woff2'),
         url(${item.url1}) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
      `).join('\n')}
    `;
    document.head.appendChild(styleEl);
  </script>
</head>