Tengo una aplicación vue que es multilingüe (que para eso usé i18n) y necesito manejar la familia de fuentes para cada idioma en un archivo css diferente.
Tuve la idea de que puedo importar archivos css de forma condicional, pero no sé cómo.
¿Alguien más tiene alguna idea o solución para mi problema?
Hay dos archivos css diferentes como este y cada uno representa una fuente diferente de la otra:
@font-face { font-family: "Questrial"; src: url("../../fonts/Questrial-Regular.ttf"); } @font-face { font-family: "Galano_Grotesque_extra_Bold"; src: url("../../fonts/Galano_Grotesque_Bold.otf"); } @font-face { font-family: "Galano_Grotesque_Bold"; src: url("../../fonts/Galano_Grotesque_DEMO_Bold.otf"); }Si quiero decir eso en otras palabras, mi aplicación tiene idioma "inglés" y "persa". Cuando la configuración regional de la aplicación es en inglés, necesito renderizar el archivo en-css.css y cuando la configuración regional es persa, necesito renderizar el archivo fa-css.css.
Me encantaría escuchar tus ideas :)
Puede usar su atributo html -tags lang para sobrescribir la familia de fuentes utilizada en su etiqueta html de acuerdo con el idioma de su aplicación.
@font-face { font-family: "Questrial"; src: url("../../fonts/Questrial-Regular.ttf"); } @font-face { font-family: "Galano_Grotesque_extra_Bold"; src: url("../../fonts/Galano_Grotesque_Bold.otf"); } @font-face { font-family: "Galano_Grotesque_Bold"; src: url("../../fonts/Galano_Grotesque_DEMO_Bold.otf"); } /* english font default */ html { font-family: "Questrial"; } /* other font for persian */ html[lang="fa"] { font-family: "Galano_Grotesque_Bold"; }Dado que no puede cambiar el atributo lang , puede usar unicode-range en las definiciones de fuente. Para idiomas que utilizan el alfabeto latino básico:
@font-face { font-family: "Questrial"; src: url("../../fonts/Questrial-Regular.ttf"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }Y para persa (usando Vazir como fuente persa de muestra),
@font-face { font-family: "Vazir"; src: url("../../fonts/vazir.ttf"); unicode-range: U+0660-0669, U+06F0-06F9; }Los rangos de Unicode anteriores pueden necesitar ajustes según los requisitos de su aplicación.