Question

我开发了支持英语和日语的网络应用程序。我有不同的英文字体。最近我得到了像日语的不同字体的要求，如h1，h2，p等。

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

我可以将课程添加到正文中作为＆＃34; lang-eng＆＃34;或者＆＃34; lang-ja＆＃34;根据语言。

英文：

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

}

是否可以使用相同的font-face名称和不同的src？提前谢谢。

Answer 1

您可以指定每个字体系列src应使用的字符子集https://laravel.com/docs/5.6/structure。你的例子看起来像这样：

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

Answer 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

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

2 个答案: