Question

有人可以向我解释为什么当我设置lang="ar"时，字体系列会选择sans-serif字体而lang="en"选择Open Sans字体。

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

Answer 1

并非所有字体都包含所有字符。最有可能的是，Open Sans不包含该语言的正确字符，因此浏览器将排在下一行字体中，依此类推，直到找到可能具有您需要的字符的系统字体。最后，如果所有其他方法都失败了，你会得到豆腐＃34;通常是一个空盒子，一个带X的盒子，或一个包含该角色十六进制代码的盒子。

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

Answer 2

正在发生的是Arabic characters are not supported by Open Sans。因此，在两个片段中，Open Sans根本没有被应用，浏览器直接进入后备字体。

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

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

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

Answer 3

后备算法完全到供应商，所以每个浏览器的实现都不同。

经常发生什么？

定义fontFamily列表：a, b, c, d;

此列表是基于优先级的，因此，浏览器将从l0 => ln进行查找。

glyph lookup step：TextEngine尝试根据给定的列表绘制文本，并优雅地从l0回退到ln。

由于您的文字السلام عليكم无法使用您的第一个首选fontFamily呈现，因此会回退到any sans-serif

您可以在此处找到更深入的解释：https://stackoverflow.com/a/29242255/4099454

Answer 4

由于未知原因，＆＃39; - ＆＃39; sans-serif的char是阿拉伯语的一个问题，现在一切正常^^

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

不同语言的不同字形选择

4 个答案: