如何覆盖nb-theme的font-family配置，实现多语言切换不同字体

解决方案 #

1. 先排查基础配置问题

先打开浏览器控制台「网络」标签，检查两个自定义字体文件的请求状态，确认没有返回404。你当前@font-face里用的是绝对路径/assets/...，如果应用部署在子目录下会出现路径错误，建议改为相对路径：

@font-face {
  font-family: "myArabicFont";
  src: url("../assets/skins/fonts/arabic-ge-ss-text-light/ArbFONTS-GE_SS_TEXT_LIGHT.otf");
}

@font-face {
  font-family: "myCalibri";
  src: url("../assets/skins/fonts/calibri/Exo-Regular.otf");
}

2. 解决样式优先级问题

你遇到的自定义样式不生效、仅首个元素生效的核心原因是：主题默认给所有子元素单独指定了font-family，覆盖了根元素的继承属性，且你的自定义样式优先级低于主题样式。
按以下步骤修改即可生效：

• 首先调整全局样式的引入顺序，必须先引入主题样式文件，再引入你自己写的自定义样式文件，保证自定义样式优先级更高
• 在全局样式中添加以下代码，通过根元素类全局覆盖所有元素的字体设置：

/* 阿拉伯语字体样式 */
.arabic-mode,
.arabic-mode * {
  font-family: "myArabicFont", sans-serif !important;
}

/* 默认非阿拉伯语字体样式 */
.default-mode,
.default-mode * {
  font-family: "myCalibri", sans-serif !important;
}

• 切换语言时，直接给<ngx-app>根标签切换上面两个类即可，不需要给子元素单独加类，全局会统一生效。

3. 更优化的方案（推荐）

如果你的主题使用CSS变量定义默认字体，直接覆盖CSS变量即可，不需要加!important：

/* 可先在控制台元素样式中查看主题使用的字体CSS变量名，通常为--font-family、--font-primary等 */
.arabic-mode {
  --font-family-primary: "myArabicFont", sans-serif;
}
.default-mode {
  --font-family-primary: "myCalibri", sans-serif;
}

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