PrimeVue v3迁移至v4遇Font-Family异常：Lara主题字体问题

我正按照官方迁移指南将PrimeVue从v3.46.0版本迁移至v4.2.1版本。此前使用Soho主题搭配自定义主题切换器，可正常切换使用Lara主题（亮色/暗色模式），一切表现正常。但现在采用新版方式使用Lara主题时，所有组件的字体显示为Times New Roman，观感不佳。

我想确认该现象是否正常、是否需要手动在main.css等位置配置，或是遗漏了某项配置（已查阅官方配置文档），亦或是操作有误。目前我的代码完全遵循文档中Styled Mode的示例：

当前配置代码 #

main.css #

body {
  margin: 0;
}

main.js #

import PrimeVue from 'primevue/config'
import Lara from '@primevue/themes/lara'
const app = createApp(App);

app.use(PrimeVue, {
    theme: {
        preset: Lara,
        options: {
            prefix: 'p',
            darkModeSelector: false || 'none',
            cssLayer: false
        }
    }
})

补充说明 #

手动在main.css中指定字体可解决问题：

body {
  margin: 0;
  font-family: Montserrat;
}

核心疑问：是否存在可通过font-family: var(--font-family)引用的默认字体变量？

1. 该现象不正常，Lara主题预设本身定义了--font-family等全局CSS变量，出现Times New Roman是因为组件未读取到这些变量，回退到浏览器默认字体。
2. 你可以直接在全局样式中引用这个默认变量，修改main.css即可：

   body {
     margin: 0;
     font-family: var(--font-family);
   }
   

3. 检查配置中的cssLayer: false，这可能导致主题样式的优先级不足，无法将变量注入全局。建议改为默认值cssLayer: 'primevue'，确保主题样式层级正确。

内容的提问来源于stack exchange，提问作者FloCAD