Angular 19+PrimeNG 19+TailwindCSS 4.1项目全局设置默认字体Exo 2失败求助

大家好，我目前在开发一个基于Angular 19、PrimeNG 19和TailwindCSS 4.1的项目，想要把「Exo 2」设置为整个项目的默认字体。我的思路是修改TailwindCSS的默认字体配置，让PrimeNG组件自动继承这个字体，但尝试了几种方法都没成功，想请教下问题出在哪？

我的当前配置（styles.scss） #

@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap");
@import "tailwindcss";
@import "primeicons/primeicons.css";
@import "leaflet.markercluster/dist/MarkerCluster.css";
@import "leaflet.markercluster/dist/MarkerCluster.Default.css";

// 第一种尝试的主题配置
@theme {
  --default-font-family: "Exo 2", sans-serif;
} 

// 第二种尝试的主题配置（已注释）
/*@theme {
  --font-sans: "Exo 2", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: "Exo 2", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Exo 2", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}*/

html, body {
  height: 100%;
}

// 试图让PrimeNG组件继承字体
.p-component {
  font-family: inherit;
}

问题现象 #

我原本预期Exo 2会成为全局默认字体，但实际测试时：

• 检查PrimeNG组件（比如<p-menubar>）的元素样式，看不到Exo 2的影子；
• 普通HTML元素（比如<p>标签）也没有应用这个字体。

会不会是index.html的配置有问题？或者TailwindCSS的主题配置方式不对？

解决方案（针对你的问题） #

1. 修正TailwindCSS 4.x的主题配置顺序与变量

TailwindCSS 4.x的@theme块必须放在导入Tailwind之前，这样Tailwind才能正确读取你的自定义主题变量。而且你之前用的--default-font-family不是Tailwind的默认变量，应该覆盖--font-sans（Tailwind全局文本默认使用这个变量）：

调整styles.scss的开头部分：

// 1. 先导入字体
@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap");

// 2. 配置自定义主题（必须在@import tailwindcss之前）
@theme {
  --font-sans: "Exo 2", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

// 3. 再导入TailwindCSS
@import "tailwindcss";

// 其他第三方样式导入...
@import "primeicons/primeicons.css";
@import "leaflet.markercluster/dist/MarkerCluster.css";
@import "leaflet.markercluster/dist/MarkerCluster.Default.css";

2. 确保全局基础元素应用自定义字体

即使配置了Tailwind变量，也要确保html和body元素实际使用这个字体。修改你的全局样式：

html, body {
  height: 100%;
  // 直接引用自定义的字体变量
  font-family: var(--font-sans);
}

或者更简单的方式：在index.html的<body>标签上添加Tailwind的font-sans类，比如：

<body class="font-sans">
  <!-- 你的应用内容 -->
</body>

3. 加固PrimeNG组件的字体继承

你写的.p-component { font-family: inherit; }是正确的，但如果还是不生效，可以尝试明确指定继承变量，同时确保样式优先级：

.p-component {
  font-family: var(--font-sans) !important;
}

（注：!important是临时排查用的，确认生效后可以去掉，只要保证这段样式在PrimeNG的样式之后加载即可）

4. 排查index.html的冲突样式

打开index.html检查是否有全局样式覆盖了字体配置，比如是否存在类似：

<style>
  body {
    font-family: Arial, sans-serif;
  }
</style>

这类代码会直接覆盖你的自定义字体，需要删除或修改。

验证步骤 #

修改完成后，重启Angular开发服务（ng serve --open），然后用开发者工具检查：

1. 查看html/body元素的font-family是否显示为"Exo 2", ui-sans-serif, ...；
2. 查看PrimeNG组件的font-family是否继承了父元素的变量。

按照这些步骤操作后，Exo 2应该就能成为你项目的全局默认字体了。

内容来源于stack exchange