MacOS: вес шрифтов из определенного семейства шрифтов не отображается должным образом в браузере/не загружается должным ⇐ CSS

[Anonymous]

Цель:
Отобразить соответствующую толщину шрифта для семейства шрифтов Proxima Nova в Firefox и (Headless)Chrome в macOS для локальных визуальных тестов веб-страницы.
Информация:

• Proxima Nova и все ее варианты шрифта (Thin, Regular, Semibold). , Жирный, Экстражирный, Черный, +Курсив) установлены локально в книге шрифтов macOS.
• Все файлы также доступны как шрифты открытого типа (.otf) как часть веб-приложения
• Шрифты различной толщины не отображаются должным образом в Firefox и Chrome, но отображаются правильно в Safari:
  
  Сафари (хорошо): https://ibb.co/r6DV0hm (описание: заголовок и значение в карточке выделены жирным шрифтом)
• Chrome/Firefox (плохо): https://ibb.co/k2QmL5S (описание) : заголовок и значение в карточке указаны в обычном формате)

CSS:

Код: Выделить всё

index.css

Код: Выделить всё

@font-face {
font-family: "Proxima Nova";
font-style: normal;
font-weight: 400;
src:
local("Proxima Nova"),
local("ProximaNova"),
url("./assets/fonts/proxima/Mark Simonson - Proxima Nova Regular.otf")
format("opentype");
}
@font-face {
font-family: "Proxima Nova";
font-style: normal;
font-weight: 600;
src:
local("Proxima Nova"),
local("ProximaNova"),
url("./assets/fonts/proxima/Mark Simonson - Proxima Nova Semibold.otf")
format("opentype");
}
@font-face {
font-family: "Proxima Nova";
font-style: normal;
font-weight: bold;
src:
local("Proxima Nova"),
local("ProximaNova"),
url("./assets/fonts/proxima/Mark Simonson - Proxima Nova Bold.otf")
format("opentype");
}
@font-face {
font-family: "Proxima Nova";
font-style: normal;
font-weight: 800;
src:
local("Proxima Nova"),
local("ProximaNova"),
url("./assets/fonts/proxima/Mark Simonson - Proxima Nova Extrabold.otf")
format("opentype");
}

(в компоненте)

Код: Выделить всё

font-family: Proxima Nova;
font-style: normal;
font-weight: 900;

В инспекторе CSS Firefox:

Код: Выделить всё

  font-family: Proxima Nova;
font-style: normal;
font-weight: 900;

Версии:
Эта проблема была проверена на наличие в следующих версиях:

• macOS: 11, 12, 13, 14, 15 (последняя версия) – от BigSur до Sequioa.
• Chrome: 83.0, 134.0 (последняя версия). ) -- Протестировано 83, протестировано 134, но нет никакой информации о том, что между ними
• Firefox: 134.0 (последняя версия) – предыдущая версия не тестировалась

Проверено, что эта проблема НЕ присутствует (работает нормально) в следующих средах:

• macOS 15 (последняя версия) + Safari: 17.4.1 (последнее)
• docker - node:20-slim + HeadlessChrome 83.0
• debian + HeadlessChrome 83.0

< Strong>Вопрос:
Почему CSS работает правильно в Linux и macOS Safari, но не в macOS x Firefox или Chrome?
Это потому, что Firefox/Chrome загрузите шрифты отличаются от Safari на macOS, и что в Linux шрифты не установлены и, следовательно, читаются непосредственно из файлов otf?
РЕДАКТИРОВАТЬ при написании сообщения:
Удаление

Код: Выделить всё

src:
local("Proxima Nova"),
local("ProximaNova"),

из блоков @font-face решает проблему.
поэтому новый вопрос:
Может ли кто-нибудь объяснить, как исправить локальную конфигурацию macOS для правильной загрузки Proxima Nova? Есть ли способ настроить через CLI, какой файл шрифта использовать для разной толщины?[/b]

Подробнее здесь: https://stackoverflow.com/questions/793 ... in-browser