如何为不同的语言使用不同的字体？答案

【问题标题】：How to use different font face for different languages?如何为不同的语言使用不同的字体？
【发布时间】：2018-03-26 19:26:57
【问题描述】：

我开发了支持英语和日语的网络应用程序。我有不同的英文字体。最近我对一些元素（如 h1、h2、p）有不同的日文字体要求。

已经为许多元素编写了字体名称。所以我不能去改变每个元素。建议我处理这种情况。

我可以根据语言将类添加为“lang-eng”或“lang-ja”。

英语：

@font-face {
  font-family: "DroidSerif";
 src: url("https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf")
format("truetype");
}

日语：

@font-face {
font-family: "DroidSerif";
 src: url("https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-
 Regular.woff2")
    format("truetype");

}

是否可以使用相同的字体名称和不同的 src ？提前致谢。

【问题讨论】：

CSS 不是编程语言，我认为使用它无法检测语言。
@SaidbakR 这与检测语言无关。我可以根据语言将课程设置为正文。我需要根据类名应用不同的字体样式而不更改字体名称，因为还没有准备好接触所有的 css 代码。
我喜欢 Kobys 的想法，尽管我会把它全部放在一个 css 文件中，然后添加/删除具有不同样式的类。例如：为所有在日文模式下具有不同样式的元素添加一个类“.japanese”，并在所有具有日文类的元素上使用 CSS 中的其他字体
@TimGerhard。由于它的 ssr，我不能要求后端团队做这些事情。我只有一个 style.css，我有所有代码。
“我可以根据语言将类添加为“lang-eng”或“lang-ja”” - 不要 - 这就是 lang 属性是为了开始。

标签： html css sass

【解决方案1】：

您可以指定每个字体系列src 应与as explained here 一起使用的字符子集。您的示例如下所示：

@font-face {
  font-family: "DroidSerif";
  src: url("https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf")
  format("truetype");
  unicode-range: U+000-5FF; /* Latin glyphs */
}


@font-face {
  font-family: "DroidSerif";
  src: url("https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2")
  format("truetype");
  unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
}

【讨论】：

不知道那是一回事！ +1
@miguel。这是否意味着包含日文字符的元素将完全获得新的字体系列？
它将，对于指定范围内的字符。检查它：codepen.io/miguelcalderon/pen/qoPJNy
如果字体在指定范围内没有某些字形，则可能会呈现空方块。
当然，您应该确保您使用的字体包含您将要使用的字形。

【解决方案2】：

只需将 font-family 名称值更改为：

@font-face {
  font-family: "DroidSerifEng";
 src: url("https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf")
format("truetype");
}

@font-face {
font-family: "DroidSerifJap";
 src: url("https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-
 Regular.woff2")
    format("truetype");
}

然后在你的 CSS 中：

.lang-eng{
 font-family: DroidSerifEng !important;
}

.lang-ja{
 font-family: DroidSerifJap !important;
}

然后在你的html中：

<body class="lang-eng"> English

和

<body class="lang-ja"> Japanese

【讨论】：

对于英语，我使用了 11 种字体系列，其中包含粗体、斜体、常规和浅色，因此我无法将所有字体系列替换为日语的单一字体系列。日语也有很多字体。谢谢