Programmiererforum

Posted: **19 Jan 2025, 20:08**

Ziel:
Rendern Sie die geeignete Schriftstärke für die Schriftfamilie Proxima Nova in Firefox und (Headless)Chrome unter macOS für lokale visuelle Vergleichstests der Webseite.
/>Info:

Proxima Nova und alle seine Schriftvarianten (Dünn, Normal, Halbfett). , Fett, Extrafett, Schwarz, +Kursiv) werden alle lokal installiert im Schriftartenbuch von macOS.
Alle Dateien sind auch als OpenType-Schriftarten (.otf) als Teil der Webanwendung verfügbar
Die verschiedenen Schriftstärken werden in Firefox und Chrome nicht richtig wiedergegeben, in Safari jedoch richtig:

Safari (gut): https://ibb.co/r6DV0hm (Beschreibung: Titel und Wert auf der Karte sind fett gedruckt)
Chrome/Firefox (schlecht): https://ibb.co/k2QmL5S (Beschreibung: Titel und Wert auf der Karte sind normal )

CSS:

Code: Select all

index.css

Code: Select all

@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");
}

(in der Komponente)

Code: Select all

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

Im CSS-Inspektor von Firefox:

Code: Select all

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

Versionen:
Dieses Problem wurde auf die folgenden Versionen getestet:

macOS: 11, 12, 13, 14, 15 (neueste Version) – von BigSur bis Sequioa
Chrome: 83.0, 134.0 (neueste Version). ) -- 83 getestet, 134 getestet, aber keine Ahnung dazwischen
Firefox: 134.0 (neueste) – keine frühere Version getestet

Es wurde getestet, dass dieses Problem in den folgenden Umgebungen NICHT auftritt (funktioniert einwandfrei):

[*]macOS 15 (neueste Version) + Safari: 17.4.1 (neueste)
[*]docker – node:20-slim + HeadlessChrome 83.0
[*]debian + HeadlessChrome 83.0

Frage:
Warum funktioniert das CSS ordnungsgemäß unter Linux und unter macOS Safari, aber nicht unter macOS x Firefox oder Chrome?
Liegt es daran Firefox/Chrome lädt die Schriftarten anders als Safari unter macOS und dass unter Linux die Schriftarten nicht installiert sind und somit direkt aus den OTF-Dateien gelesen werden?
BEARBEITEN beim Schreiben Beitrag:
Entfernen

Code: Select all

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

aus den @font-face-Blöcken löst das Problem.
also neue Frage:
Kann jemand erklären, wie man die lokale macOS-Konfiguration korrigiert, um Proxima Nova ordnungsgemäß zu laden? Gibt es eine Möglichkeit, über die CLI zu konfigurieren, welche Schriftartdatei für unterschiedliche Stärken verwendet werden soll?

Programmiererforum

MacOS: Schriftstärken einer bestimmten Schriftfamilie werden im Browser nicht richtig angezeigt/nicht richtig in die Sch

MacOS: Schriftstärken einer bestimmten Schriftfamilie werden im Browser nicht richtig angezeigt/nicht richtig in die Sch