Ist es möglich, ein Mac OS-spezifisches CSS zu erstellen, um den Schriftunterschied zu beheben?

Question

Ich arbeite an einem Projekt mit einem Designer und er bestand darauf, eine bestimmte Schriftart für Titel und verschiedene Elemente auf der Seite zu verwenden. Also verwenden wir ein Font-Kit zum Einbetten mit @ font-face.

Es funktioniert perfekt auf PC (Firefox, IE 7 und 8, Chrome, Safari), aber auf Mac OS (Safari und Firefox) sind die Schriften nicht vertikal auf die gleiche Weise ausgerichtet. Nachdem ich im Web nachgesehen habe, habe ich keine Lösung gefunden, außer "es gab immer Unterschiede zwischen Browsern und Plattformen, lebe damit".

Ich weiß, dass Fonts nie über Plattformen genau gleich gerendert werden, aber dieses Mal ist es nicht so etwas wie die Schriftart sieht mehr fett oder so ähnlich. Die Schriftart sieht so aus, als ob ihre Grundlinie zwischen Windows und Mac OS X völlig anders ist. Unter Mac OS ist die Schrift bei einer Größe von 16px 3px höher als auf dem PC.

Also ich bin auf der Suche nach einer Backup-Lösung: Gibt es eine Möglichkeit, ein CSS speziell für Mac OS Benutzer zu erstellen? Ich möchte nicht nur Safari als Ziel verwenden, da Safari PC in Ordnung ist und Firefox Mac nicht in Ordnung ist.

Oder wenn Sie eine Lösung zum Korrigieren der Baseline-Differenz haben, die keine bestimmte CSS-Datei erfordert, würde ich mich freuen, sie zu hören.

Danke!

Answer 1

Wenn das Festlegen einer expliziten Zeilenhöhe das Problem nicht behebt, können Sie jedem Browser verschiedene Stylesheets mit Ihrem Back-End bereitstellen und das Betriebssystem in Ihrer Anwendung ermitteln (über den Benutzer-Agent). Sie können auch etwas in JS tun, das dasselbe tut, aber es wird wahrscheinlich einen FOUC geben, während JS die relevanten Stile lädt.

Answer 2

Ich fürchte, dass browser/os schnüffeln ist Ihre einzige Option. CSS selbst hat keine Kenntnisse über OS, noch habe ich jemals von einem CSS-Hack gehört, der gezielt auf Osx abzielt.

Dies ist der einfachste Weg für mich, OSX zu erkennen und die OSX-Klasse zum Dokumentkörper hinzuzufügen, so dass Sie CSS-Stile speziell für OSX überschreiben können.

if(navigator.platform.match('Mac') !== null) { 
    document.body.setAttribute('class', 'OSX'); 
} 

Answer 3

Es gibt einen einfacheren Weg. http://rafael.adm.br/css_browser_selector/

Es erkennt den Browser und os und ermöglicht es Ihnen, Klassen zu spezifizieren.

Answer 4

Wenn Sie nahezu perfekt und schmerzlos arbeiten möchten, müssen Sie die gängigen Schriftarten oder Schriftarten aus einem Online-Dienst wie der kostenlosen Font-Bibliothek von Google oder einer der Bibliotheken für die Bezahlung von Schriften verwenden. Diese Schriftarten wurden für die Arbeit im Internet entwickelt und getestet.

Experimentieren und einschließlich Schriftarten für den Browser des Benutzers zum Download und versuchen, korrekt anzuzeigen ist in Ordnung, aber nicht perfekt und wird nicht schmerzfrei sein. Seien Sie außerdem sehr vorsichtig mit den Lizenzbeschränkungen. Stellen Sie sicher, dass die Zeichensätze, die Ihr Designer verwenden möchte, ordnungsgemäß für die Verwendung auf der Website des Kunden lizenziert sind.

Wenn Sie Browser-Sniffing durchführen und mehrere Stylesheets bereitstellen müssen, würde ich an dieser Stelle sagen, dass Ihr Design fehlerhaft ist und überarbeitet werden muss. Zeigen Sie Ihrem Designer https://fonts.google.com und sehen Sie, ob er eines davon mag - sie arbeiten plattformübergreifend in allen modernen Browsern und einige sind sehr glatt. EDIT: Oh, und sie sind frei, ohne Sorgen der Lizenzierung zu verwenden.