Может ли кто-нибудь объяснить мне, почему, когда я устанавливаю 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>
Что происходит, что арабские символы не поддерживаются Open Sans. Таким образом, в обоих ваших фрагментах Open Sans не применяется вообще, и браузер идет прямо к резервному шрифту.
Причина, по которой шрифт выглядит по-разному в обоих ваших фрагментах, заключается в том, что в вашем первом фрагменте браузер знает, что язык является арабским из-за тега lang. Он запрашивает систему для лучшего sans-serif резервного шрифта для арабского языка, а на Mac это Geeza Pro Regular.
В своем втором фрагменте браузер считает, что язык является английским, и запрашивает лучший sans-serif резервный шрифт для английского языка. На Mac это Arial.
Оба Geeza Pro и Arial, по-видимому, поддерживают арабский текст, но в зависимости от реального языка система выбирает один над другим.
Не все шрифты содержат все символы. Скорее всего, Open Sans не включает в себя правильные символы для этого языка, и поэтому браузер попадает в следующий шрифт в строке и так далее, пока не найдет системные шрифты, которые могут иметь характер, который вам нужен. Наконец, если все остальное не удается, вы получаете "tofu", как правило, пустой ящик, поле с X или поле, содержащее шестнадцатеричный код символа.
Более подробную информацию вы можете найти в официальной спецификации W3C CSS Fonts Module Level 3: https://www.w3.org/TR/css-fonts-3/#font-matching-algorithm.
резервный алгоритм полностью для поставщика, поэтому каждый браузер может отличаться в своей собственной реализации.
Что обычно происходит?
fontFamily: a, b, c, d;Этот список основан на приоритете, поэтому браузер будет искать от l0 => ln.
glyph lookup step: TextEngine пытается нарисовать текст с учетом данного списка, и он изящно отступает от l0 до ln.Поскольку ваш текст السلام عليكم не может быть отображен с помощью вашего первого предпочтительного fontFamily, он отбрасывает any sans-serif
Здесь вы можете найти более подробное объяснение: fooobar.com/questions/212067/...
По неизвестным причинам '-' 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>