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

Posted 2023-02-16

【中文标题】语言更改时如何管理两个不同的字体文件

【英文标题】：How to manage two different font files when language changes

【发布时间】：2022-01-06 01:16:35

【问题描述】：

我有一个多语言的 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 文件。

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

【问题讨论】：

您的应用程序是否根据您提供的语言正确设置了html-tag 的lang 属性？如果是，您可以使用attribute selector 根据值更改字体。

@F***S。是的，它确实。谢谢

【参考方案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 范围可能需要根据您的应用要求进行调整。

【参考方案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";

【讨论】：

感谢您的想法。但是当我更改语言时，html 元素中的 lang 属性不会更新并且保持不变。

@NiazEstefaie 你的意思是你的应用程序的语言发生了变化，但lang 属性没有？所以你的页面显示波斯语内容但lang 属性仍然是en？情况并非如此，lang 属性始终应代表内容语言。

是的，语言更改时 lang 属性不会更新。