Как заменяются шрифты в семействе шрифтов CSS
Недавно я наткнулся на такой код:
span { font-family: Helvetica, 'Segoe UI'; }
<span>Lorem ipsum</span>
На моем компьютере нет Helvetica, но присутствует пользовательский интерфейс Segoe, поэтому ожидаемый результат заключается в том, что текст будет отображаться с использованием Segoe. Однако используется Arial (как проверено в DevTools).
После некоторой игры я уверен, что мой браузер обрабатывает запись Helvetica так, как если бы это была Arial, поэтому процесс выбора шрифта останавливается на этом — на несуществующем шрифте.
Как это решено? Есть ли списки замены шрифтов? Я не могу найти ничего подобного в спецификации модуля CSS Fonts.
Это происходит как в Chromium Edge, так и в Firefox в Windows 11.
пожалуйста, проверьте это. stackoverflow.com/questions/6996632/… , w3schools.com/cssref/pr_font_font-family.php
@JeffZeitlin, спасибо! Кажется, именно это является причиной того, что Helvetica рассматривается как Arial.
Не нужно экспериментировать: откройте инструменты разработки Firefox и просто посмотрите, какой шрифт, как знает браузер, он применил (не как свойство CSS, а как фактическое отображение). Существует специальная вкладка шрифтов, и при наведении курсора на шрифты будет выделен весь текст, в котором он используется. Невероятно ценная панель инструментов разработчика).
@Mike'Pomax'Kamermans, я спрашивал не какой шрифт применяется, а почему применяется определенный шрифт
«После некоторой игры я уверен, что мой браузер воспринимает запись Helvetica так, как если бы это был Arial», говорит, что здесь требуется догадка, поэтому исключите догадки из отладки. Я не пытался ответить на ваш пост (у вас уже есть ответ), а указал не только вам, но и всем будущим посетителям, которые найдут этот пост, что есть способ просто проверить.
Да, я хотел убедиться, что вместо Helvetica применяется Arial, а не потому, что это может быть шрифт без засечек по умолчанию.
Ответы 2
Судя по вашему ответу на мой комментарий к вопросу, у вас в реестре есть несколько записей о замене шрифтов, и одна из них — замена Arial на любой запрос на Helvetica. Это описано в этой публикации на техническом сообществе Microsoft; по сути, в реестре в разделе HKLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontSubstitutes есть записи, позволяющие приложениям использовать шрифты, которые у вас есть, когда запрашиваются определенные предположительно похожие шрифты, которых у вас нет.
В описанном вами сценарии, где браузер, кажется, заменяет Arial на Helvetica, несмотря на то, что пользовательский интерфейс Segoe доступен и указан следующим в стеке шрифтов CSS, вы сталкиваетесь с тем, что обычно называют резервным шрифтом или поведением замены шрифта в веб-браузерах. Это поведение не подробно описано в модуле «Шрифты CSS», но является частью того, как браузеры обрабатывают рендеринг шрифтов в различных операционных системах, особенно когда указанный шрифт не найден. span {семейство шрифтов: 'Segoe UI', Arial, без засечек; }
Это может быть techcommunity.microsoft.com/t5/windows-insider-program/…