css - 字体条件样式 CSS

Question

我的网站使用一种拉丁字体和一种阿拉伯字体(Adobe Typekit 字体)。

动态生成的文本 (p) 采用斜体，有时用拉丁语书写，有时用阿拉伯语书写。

所以我有一个 CSS 规则:

p {
   font-family: "Arno-Pro", "Athelas-Arabic", serif;
   font-style: italic; 
}

问题是阿拉伯字体没有斜体字符，因为阿拉伯语是用 font-style: normal; 书写的语言。因此，它不再使用阿拉伯字体，而是退回到丑陋的系统字体。

出于演示目的，使其更简单，假设我有这行文本:

<p> Lorem ipsum لكن لا بد </p>

如何定位拉丁字母以斜体形式加载，而阿拉伯字母以正常形式加载？

注意:文本是动态生成的，不能在其中使用自定义标记。

Answer 1

您可以通过具有特定 unicode ranges 的 @font-face 规则覆盖实际使用的字体:

p {
   font-family: "Arno-Pro", serif;
   font-style: italic; 
}

/* default latin */
@font-face {
  font-family: "Arno-Pro";
  src: url(https://fonts.gstatic.com/s/notosans/v27/o-0OIpQlx3QUlC5A4PNr4ARCQ_k.woff2) format('woff2');
  font-style: italic;
}

/* override for arabic unicode range */
@font-face {
  font-family: "Arno-Pro";
  src: url(https://fonts.gstatic.com/s/notosansarabic/v18/nwpxtLGrOAZMl5nJ_wfgRg3DrWFZWsnVBJ_sS6tlqHHFlhQ5l3sQWIHPqzCfyGyfuXqA.woff2) format('woff2');
  /* arabic unicode range */
  unicode-range: U+0600-06FF;
  font-style:italic;
}

<p class="mixed">Lorem ipsum لكن لا بد latin text again</p>

在上面的示例中，我们为之前声明的默认字体映射指定了 css 覆盖:

• 默认字体应为“Arno Pro”
• 阿拉伯字母表 unicode 范围内的字符(在本例中为 U+0600-06FF)应映射到另一个字体文件(支持这些字符或更精确的字形)
• 并且还映射到 font-style:italic – 否则文本将被人为倾斜(也称为 "faux italic" )。

因此，我们不是在 font-family 属性中指定专用的阿拉伯字体，而是像这样重写字体映射:

p {
   font-family: "Arno-Pro", serif;
   font-style: italic; 
}

/* override for arabic unicode range */
@font-face {
  font-family: "Arno-Pro";
  src: url(fonts/Athelas-Arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF;
  font-style:italic;
}

此 CSS 规则翻译为:
对于此(阿拉伯语)unicode 范围 - 采用“Athelas-Arabic”字体文件(因此这将成为“Arno-Pro”)。 通过添加 font-style:italic 属性，我们可以避免“假斜体”倾斜，因为我们的 css 规则表明:这已经是正确的斜体字体(即使不是)。