在Angular中如何根据所选语言动态切换字体？

完全可以基于你现有逻辑扩展动态字体切换功能，不需要重构现有业务代码，具体实现步骤如下：

1. 先在LanguageService中新增字体映射配置与setFont方法 #

你可以预先配置好每种语言对应的字体，未匹配到的语言默认使用Lato即可，修改后的服务代码示例：

@Injectable({ providedIn: 'root' })
export class LanguageService {
  // 语言-字体映射配置，可根据实际需求调整
  private readonly fontMap: Record<string, string> = {
    'zh-CN': '"Noto Sans SC", sans-serif',
    'zh-TW': '"Noto Sans TC", sans-serif',
    'ja': '"Noto Sans JP", sans-serif',
    'ko': '"Noto Sans KR", sans-serif',
    'ar': '"Noto Naskh Arabic", sans-serif',
    // 其余20种语言按需配置对应字体
  };
  private readonly defaultFont = 'Lato, sans-serif';

  constructor(private translateService: TranslateService) {}

  public setLanguage(language: string): boolean {
    if (language && this.isSupportedLanguage(language)) {
      this.translateService.use(language);
      // 切换语言成功后自动调用字体切换
      this.setFont(language);
      return true;
    }
    return false;
  }

  private setFont(language: string): void {
    const targetFont = this.fontMap[language] || this.defaultFont;
    // 给根html元素设置自定义CSS变量，全局样式都可以复用这个变量
    document.documentElement.style.setProperty('--app-font-family', targetFont);
  }

  // 你原有的isSupportedLanguage方法保持不变即可
  private isSupportedLanguage(lang: string): boolean {
    // 原有逻辑
  }
}

2. 修改全局样式适配动态字体 #

在你的全局styles.scss或者styles.css中引用上面定义的CSS变量即可：

/* 先按需引入你要用到的字体的@font-face定义 */
:root {
  --app-font-family: 'Lato', sans-serif;
}

* {
  font-family: var(--app-font-family);
}

/* 如果有组件单独写死了font-family，也要对应改成用这个变量 */

注意事项 #

• 你需要提前把所有要用到的字体资源配置好，可通过@font-face本地引入或者引入公共字体资源，避免切换语言时出现字体加载闪烁的问题
• 如果需要兼容RTL（从右到左书写）的语言，也可以在setFont方法中同步给根元素添加dir属性处理布局方向
• 如果部分页面需要单独使用特殊字体，只需要在对应页面的样式中覆盖--app-font-family变量即可

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