如何在 vuetify 中更改语言环境时更改字体系列

Question

我有一个多语言应用程序，它将通过 select 输入在两种语言之间切换区域设置来切换语言，另一方面，我有 2 个字体系列，我想在区域设置时切换改变了。

vuetify.js

    import Vue from 'vue';
    import Vuetify from 'vuetify';
    import 'vuetify/dist/vuetify.min.css';
    import fa from '../i18n/vuetify/fa.ts';
    import en from '../i18n/vuetify/en.ts';
    
    Vue.use(Vuetify);
    
    export default new Vuetify({
      rtl: true,
      lang: {
        locales: { fa, en },
        current: 'fa',
      },
    });

style.scss

    // my font-faces
    @import url('./fonts/gilroy/gilroy.css');
    @import url('./fonts/yekan/yekan.css');
    
    $font-family: 'YekanBakh'; //or Gilroy
    .v-application {
        font-family: $font-family, sans-serif !important;
        [class*='text-'] {
          font-family: $font-family, sans-serif !important;
        }
      }

LanguageSelector.vue

export default {
  data: () => ({
    languages: [
      {
        label: 'فـارسی',
        value: 'fa',
        icon: iranFlag,
      },
      {
        label: 'English',
        value: 'en',
        icon: ukFlag,
      },
    ],
    selectedLanguage: {
      label: 'فـارسی',
      value: 'fa',
      icon: iranFlag,
    },
  }),
  watch: {
    selectedLanguage(val) {
      this.$vuetify.lang.current = val;
      if (val === 'en') {
        this.$vuetify.rtl = false;
      } else {
        this.$vuetify.rtl = true;
      }
    },
  },

Answer 1

尽管有不同的实现方式，但逻辑是相似的。您应该有两个单独的文件（例如：style.css 和 style.rtl.css），并在您的自定义语言服务的帮助下检测所选语言环境的方向，然后将相应的样式应用到您的应用程序。但是，我们如何才能实现这个目标呢？这完全取决于您的需要。您可以手动完成或使用类似 plugin.

的东西

如何在 vuetify 中更改语言环境时更改字体系列

How to change font-family when locale language changes in vuetify

fonts

vue.js

vuejs2

vuetify.js