Chrome/MacOS и Firefox/MacOS могут отображать строку с глифами из двух шрифтов, но Chrome/iOS и Safari/Any — нет
Я хочу объявить свойство font-family, называющее два шрифта, и любые глифы, отсутствующие в первом, будут отображаться во втором. Это отлично работает в Chrome и Firefox на MacOS, но Safari/MacOS, а также Chrome и Safari на iOS будут учитывать только шрифт, указанный первым.
Минимальный случай воспроизведения:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Example</title>
<meta charset = "utf-8">
<link href = "https://fonts.googleapis.com/css2?family=Redacted+Script&family=Noto+Emoji&display=swap" rel = "stylesheet">
<style>
p {
font-family: "Redacted Script", "Noto Emoji", sans-serif;
font-weight: 400;
font-style: normal;
}
</style>
</head>
<body>
<p>Hello 😊</p>
</body>
</html>Смайлик 😊 здесь должен отображаться в Noto Emoji, а не в шрифте Emoji по умолчанию в браузере. Это то, что делают Chrome/MacOS и Firefox/MacOS.
Вот чего я ожидаю:
Но в плохих случаях вместо этого я получаю это (я думаю, смайлик взят из шрифта Apple Emoji):
Что я делаю не так? Или это смешение шрифтов в одну строку не во всех браузерах поддерживается? Есть ли обходной путь?
Это мило! Я это сделал :)
У меня ваш фрагмент работает нормально на iPad IOS 16…. Сафари. На какой версии и устройстве вы тестируете?
…но на iPhone SE iOS 17… Safari Я вижу желтый смайлик, как вы описываете.
Что ж, это любопытно насчет iPad/iOS 16. На iPhone 12 под управлением iOS 17.4.1 я вижу проблему как в Safari, так и в Chrome. В MacOS 14.3.1 и Chrome, и Firefox работают правильно, а Safari — нет.
Ответы 1
В Safari это работает, если изменить порядок семейств.
font-family: "Noto Emoji", "Redacted Script", cursive;
На самом деле, указание шрифта эмодзи первым имеет гораздо больше смысла, потому что шрифт эмодзи не будет пытаться отображать что-либо, кроме эмодзи, тогда как обычный шрифт с большей вероятностью попытается заполнить любые пробелы в своем репертуаре путем заимствование из других шрифтов.
Фрагмент для демонстрации — запустите его в Safari.
@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:[email protected]&family=Redacted+Script&display=swap');
body {
font-size: 2em;
}
.p1 {
font-family: "Redacted Script", "Noto Emoji", cursive;
}
.p2 {
font-family: "Noto Emoji", "Redacted Script", cursive;
}<p class = "p1">hello 😀😍👹🤡🤢</p>
<p class = "p2">hello 😀😍👹🤡🤢</p>Ого, какое простое, но гениальное открытие. «Настоящая» версия этой проблемы включает в себя базовый шрифт и восемь «специальных» шрифтов, которые содержат некоторые необходимые нам символы. Однако мы разделяем все восемь специальных шрифтов только на те символы, которые нам нужны. Кажется, что если я сначала перечислю все это, а затем базовый шрифт (который «кажется» неправильным), я получу именно то поведение, которое хочу, во всех браузерах, к которым у меня есть доступ. Спасибо!
Не могли бы вы превратить свой код в работоспособный фрагмент (<> в редакторе), чтобы его было легче тестировать на устройствах iOS?