Vuetify框架中切换locale语言时如何同步修改font-family

实现方案总共分3步修改即可： #

1. 调整全局样式文件 style.scss

把原来固定的字体变量改为按语言类区分的样式规则：

// 字体导入保持不变
@import url('./fonts/gilroy/gilroy.css');
@import url('./fonts/yekan/yekan.css');

// 波斯语对应字体
.v-application.locale-fa {
    font-family: 'YekanBakh', sans-serif !important;
    [class*='text-'] {
      font-family: 'YekanBakh', sans-serif !important;
    }
}

// 英语对应字体
.v-application.locale-en {
    font-family: 'Gilroy', sans-serif !important;
    [class*='text-'] {
      font-family: 'Gilroy', sans-serif !important;
    }
}

2. 修改根组件 App.vue 模板

给Vuetify的根容器v-app动态绑定语言类，和当前激活的locale关联：

<template>
  <!-- 动态绑定当前语言对应的类名 -->
  <v-app :class="`locale-${$vuetify.lang.current}`">
    <!-- 原有应用内容保持不变 -->
  </v-app>
</template>

3. 适配切换逻辑

你现有的LanguageSelector.vue的watch逻辑已经能正常修改$vuetify.lang.current，因为类名是响应式绑定的，切换语言时字体会自动同步更新，不需要额外修改切换逻辑，把原来的$font-family相关的固定样式删除即可。

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