语言更改时如何管理两个不同的字体文件

Question

我有一个多语言的 vue 应用程序（为此我使用了 i18n），我需要在不同的 css 文件中处理每种语言的字体系列。

我有一个想法，我可以有条件地导入 css 文件，但我不知道如何。

其他人对我的问题有任何想法或解决方案吗？

有两个像这样的不同 css 文件，每个都呈现不同的字体：

@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");
}

换句话说，我的应用程序有“英语”和“波斯语”两种语言。 当应用语言环境为英语时，我需要渲染 en-css.css 文件，当语言环境为波斯语时，我需要渲染 fa-css.css 文件。

我很高兴听到你的想法:)

Answer 1

鉴于您无法更改 lang 属性，您可以在字体定义中使用 unicode-range。对于使用基本拉丁字母的语言：

@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;
}

对于波斯语（使用 Vazir 作为波斯语字体示例），

@font-face {
  font-family: "Vazir";
  src: url("../../fonts/vazir.ttf");
  unicode-range: U+0660-0669, U+06F0-06F9;
}

上述 Unicode 范围可能需要根据您的应用要求进行调整。

Answer 2

您可以使用 html-tags lang 属性根据您的应用程序语言覆盖 html 标签上使用的字体系列。

@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";
}