当 vuetify 中的语言环境发生变化时如何更改字体系列

Question

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

\n

---

\n

vuetify.js

\n

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

\n

样式.scss

\n

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

\n

语言选择器.vue

\n

export default {\n  data: () => ({\n    languages: [\n      {\n        label: '\xd9\x81\xd9\x80\xd8\xa7\xd8\xb1\xd8\xb3\xdb\x8c',\n        value: 'fa',\n        icon: iranFlag,\n      },\n      {\n        label: 'English',\n        value: 'en',\n        icon: ukFlag,\n      },\n    ],\n    selectedLanguage: {\n      label: '\xd9\x81\xd9\x80\xd8\xa7\xd8\xb1\xd8\xb3\xdb\x8c',\n      value: 'fa',\n      icon: iranFlag,\n    },\n  }),\n  watch: {\n    selectedLanguage(val) {\n      this.$vuetify.lang.current = val;\n      if (val === 'en') {\n        this.$vuetify.rtl = false;\n      } else {\n        this.$vuetify.rtl = true;\n      }\n    },\n  },\n

\n

Answer 1

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