不同语言使用不同字形的选择

Question

不同语言使用不同字形的选择

24

请问一下，为什么当我设置 lang="ar" 时，字体家族会选择 sans-serif 字体，而当它设置为 lang="en" 时，它会选择 Open Sans 字体。

<html lang="ar">

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>

<body style="font-family: 'Open Sans', sans-serif;">
  السلام عليكم
</body>

</html>

<html lang="en">

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>

<body style="font-family: 'Open Sans', sans-serif;">
  السلام عليكم
</body>

</html>

- Mohamad Haidar

6

也许 Open Sans 不包含那种语言所需的字符？这种情况下，它会回退到下一个字体。 - Niet the Dark Absol

@NiettheDarkAbsol 非常感谢，非常有用的简短回答。请将其作为答案发布，我会接受它。 - Mohamad Haidar

您可以在fonts.google.com上按语言进行排序。 - Matt

修正问题。 - Sagar V

4个回答

5

发生的情况是Open Sans不支持阿拉伯字符。因此，在您的两个片段中，Open Sans根本没有应用，浏览器直接转到备用字体。

字体在两个片段中看起来不同的原因是因为在您的第一个片段中，浏览器知道语言是阿拉伯语，因为有 lang 标记。它要求系统为阿拉伯语提供最佳的 sans-serif 备选字体，在Mac上为Geeza Pro Regular。

在您的第二个片段中，浏览器认为语言是英语，并要求为英语提供最佳的 sans-serif 备选字体。在Mac上，这是Arial。

Geeza Pro和Arial都显然支持阿拉伯文本，但根据实际语言选择其中之一。

- RoelN

3

备用算法完全由供应商决定，因此每个浏览器在其自己的实现上可能会有所不同。

通常会发生什么？

1. 定义fontFamily列表：a、b、c、d； 2. glyph查找步骤：TextEngine尝试使用给定的列表绘制文本，并从l0优雅地回退到ln。由于您的文本السلام عليكم不能使用首选的fontFamily呈现，因此它回退到any sans-serif。

您可以在这里找到更详细的说明：https://dev59.com/3V4b5IYBdhLWcg3wYAf6#29242255。

- Hitmands

但是，如您在代码片段中所见，这两种字体都包含字符形状。当lang属性改变时，字体会相应地改变，它将设置Open Sans或sans-serif，Ilya的评论很好地解释了其原因。 - Christos Lytras

0

由于未知原因，无衬线字体的“-”字符对阿拉伯语来说是一个问题，现在一切都正常了^^

<html lang="ar">

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>

<body style="font-family: 'Open Sans', 'sans-serif';">
  السلام عليكم
</body>

</html>

<html lang="en">

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>

<body style="font-family: 'Open Sans', 'sans-serif';">
  السلام عليكم
</body>

</html>

<html lang="it">

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>

<body style="font-family: 'Open Sans', 'sans-serif';">
  السلام عليكم
</body>

</html>

<html lang="zu">

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>

<body style="font-family: 'Open Sans', 'sans-serif';">
  السلام عليكم
</body>

</html>

- Marco Salerno

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

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

- Niet the Dark Absol · Accepted Answer

并非所有字体都包含所有字符。很可能，Open Sans 不包含所需语言的正确字符，因此浏览器会依次使用下一个字体，直到查找可能拥有您需要字符的系统字体。最后，如果一切都失败了，您就会得到“豆腐块”，通常是一个空方框、一个带有 X 的方框，或者是一个包含该字符的十六进制代码的方框。

您可以在官方 W3C CSS Fonts Module Level 3 规范中找到更多信息：https://www.w3.org/TR/css-fonts-3/#font-matching-algorithm。