Skip to content

[Bug]: siteConfig.ts 中的 fontFamily 配置目前无法正常解析逗号分隔的字体栈 #489

Description

@Xxxhite

Describe the bug

描述

在 siteConfig.ts 中配置字体时,如果 fontFamily 的值是由多个字体组成的字体栈(例如包含逗号和空格),最终生成的 CSS font-family 规则会被错误地包裹在一对双引号内,导致自定义字体配置失效。
值得注意的是,在 2025-11-21 更新的自定义字体文档中,官方给出的配置示例正是使用了这种带空格的字体栈格式:

fontFamily: "CustomFont, Helvetica, Arial, sans-serif" 

但目前由于底层代码的限制,此类包含空格的配置无法按预期工作。

To Reproduce

复现步骤

  1. 参照文档示例,在 siteConfig.ts 中配置带空格和逗号的字体栈:
    cjkFont: {
        fontFamily: "CustomFont, Helvetica, Arial, sans-serif",
        // ...
    }
  1. 运行项目并检查浏览器中 <body style="..."> 的内联样式。
  2. 可以观察到,整个字体栈字符串被外层双引号包裹,生成了无效的 CSS:
<body style="font-family: Lora, "CustomFont, Helvetica, Arial, sans-serif", system-ui, ...">
  1. 浏览器无法识别该样式,导致网页字体直接回退到系统默认字体。

根本原因

在 src/layouts/Layout.astro (约 142-154 行),对 fontFamily 字符串的处理逻辑如下:

    // 如果字体名包含空格,需要用引号包围
    fonts.push(asciiFont.includes(" ") ? `"${asciiFont}"` : asciiFont);
// ...
    // 如果字体名包含空格,需要用引号包围
    fonts.push(cjkFont.includes(" ") ? `"${cjkFont}"` : cjkFont);

可以理解该逻辑的初衷是为了给带有空格的单个字体自动添加引号以符合 CSS 规范。但该判断条件没有对包含逗号的字体栈(Font Stack)做豁免处理。这就导致,无论是因为逗号后面的常规空格,还是字体栈本身的组合,整个逗号分隔的字符串都被视作了一个带空格的“超长单字体名”,从而被强制加上了双引号。

Expected behavior

预期行为

期望 Layout.astro 在解析 fontFamily 时,能够区分“带空格的单字体”和“包含多个字体的字体栈”。当用户传入以逗号分隔的字体栈时,能够将其原样输出,从而生成合法的 CSS 规则。

感谢作者的付出,期待后续的优化。

OS

No response

Browser

No response

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions