Различные варианты отображения глифов для разных языков

Может ли кто-нибудь объяснить мне, почему, когда я устанавливаю lang="ar", семейство шрифтов выбирает шрифт sans-serif, а когда он lang="en", он выбирает Open Sans.

<html lang="ar">

<head>
  <link href="#" onclick="location.href='https://fonts.googleapis.com/css?family=Open+Sans|Roboto'; return false;" rel="stylesheet">
</head>

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

</html>

Ответы

Ответ 1

Что происходит, что арабские символы не поддерживаются Open Sans. Таким образом, в обоих ваших фрагментах Open Sans не применяется вообще, и браузер идет прямо к резервному шрифту.

Причина, по которой шрифт выглядит по-разному в обоих ваших фрагментах, заключается в том, что в вашем первом фрагменте браузер знает, что язык является арабским из-за тега lang. Он запрашивает систему для лучшего sans-serif резервного шрифта для арабского языка, а на Mac это Geeza Pro Regular.

В своем втором фрагменте браузер считает, что язык является английским, и запрашивает лучший sans-serif резервный шрифт для английского языка. На Mac это Arial.

Оба Geeza Pro и Arial, по-видимому, поддерживают арабский текст, но в зависимости от реального языка система выбирает один над другим.

Ответ 2

Не все шрифты содержат все символы. Скорее всего, Open Sans не включает в себя правильные символы для этого языка, и поэтому браузер попадает в следующий шрифт в строке и так далее, пока не найдет системные шрифты, которые могут иметь характер, который вам нужен. Наконец, если все остальное не удается, вы получаете "tofu", как правило, пустой ящик, поле с X или поле, содержащее шестнадцатеричный код символа.

Более подробную информацию вы можете найти в официальной спецификации W3C CSS Fonts Module Level 3: https://www.w3.org/TR/css-fonts-3/#font-matching-algorithm.

Ответ 3

резервный алгоритм полностью для поставщика, поэтому каждый браузер может отличаться в своей собственной реализации.

Что обычно происходит?

Определите список fontFamily: a, b, c, d;

Этот список основан на приоритете, поэтому браузер будет искать от l0 => ln.

glyph lookup step: TextEngine пытается нарисовать текст с учетом данного списка, и он изящно отступает от l0 до ln.

Поскольку ваш текст السلام عليكم не может быть отображен с помощью вашего первого предпочтительного fontFamily, он отбрасывает any sans-serif

Здесь вы можете найти более подробное объяснение: fooobar.com/questions/212067/...

Ответ 4

По неизвестным причинам '-' char sans-serif был проблемой для арабского языка, теперь все работает ^^

<html lang="ar">

<head>
  <link href="#" onclick="location.href='https://fonts.googleapis.com/css?family=Open+Sans|Roboto'; return false;" rel="stylesheet">
</head>

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

</html>