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

Question

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

5

我已经开发了一个支持英语和日语的网络应用程序。在英文中，我有不同的字体。最近，我接到了一项要求，即对于某些元素（如h1、h2、p），需要为日语使用不同的字体。

许多元素已经写好了字体名称，所以我不能逐个更改。请建议我如何处理这种情况。

我可以将class添加到body中，例如“lang-eng”或“lang-ja”，根据不同的语言进行区分。

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

Japanese :

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

是否可以使用相同的字体名称但不同的src？谢谢。

- gauti

CSS不是一种编程语言，我认为使用它无法检测语言。 - SaidbakR

1

@SaidbakR，这不是关于语言检测的问题。我可以根据语言将类别设置为正文。我需要根据类名应用不同的字体样式，而不更改字体名称，因为尚未准备好触及所有CSS代码。 - gauti

我喜欢Koby的想法，尽管我会将所有内容都放在一个CSS文件中，并只添加/删除类，然后进行不同的样式设置。例如：为所有需要在日语模式下具有不同样式的元素添加一个“.japanese”类，并在CSS中使用其他字体来设置所有带有“japanese”类的元素。 - Tim Gerhard

@TimGerhard。由于这是 SSR，我无法要求后端团队做这些事情。我只有一个 style.css 文件，其中包含所有代码。 - gauti

我可以根据语言将类添加到body中，例如“lang-eng”或“lang-ja”，但实际上这就是lang属性的作用。 - CBroe

2个回答

0

只需将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

- SaidbakR

我使用了11种字体系列，包括粗体、斜体、常规和轻体，所以我不能将所有字体系列替换为一个日语字体。日语也有许多字体面。谢谢。 - gauti

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Miguel Calderón · Accepted Answer

您可以指定每个字体族应与哪些字符子集一起使用，如此处所述。示例如下：

@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 */
}