Tengo una aplicación en varios idiomas y cambiará el idioma a través de la entrada de selección que alterna la configuración regional entre 2 idiomas, por otro lado, tengo 2 familias de fuentes que quiero alternar cuando cambia la configuración regional.
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', }, });estilo.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; } }, },Aunque hay diferentes formas de lograr esto, la lógica es similar. Debe tener dos archivos separados (por ejemplo: style.css y style.rtl.css) y con la ayuda de su servicio de idioma personalizado, detecte la dirección de la configuración regional seleccionada, luego aplique el estilo correspondiente a su aplicación. Pero, ¿cómo podríamos lograr este objetivo? Depende totalmente de tus necesidades. Puedes hacerlo manualmente o usar algo como este complemento .