Schneller Tipp So können Sie Schriftarten über mehrere Browser hinweg konsistent darstellen

In diesem kurzen Tipp zeige ich Ihnen, wie Sie CSS basierend auf der Text-Rendering-Engine jedes Browsers anwenden.

Screencast anschauen

 

Hier ist die Sache: Je nach Browser und Betriebssystem wird der von Ihrem Browser angezeigte Text anders dargestellt. Dies kann für Designer problematisch sein, insbesondere für diejenigen, die sich auf die Perfektionierung typografischer Details wie Schrift, Größe, Gewicht, Abstand usw. konzentrieren.

Dieselbe Seite (von links nach rechts) Chrome Mac OS, Internet Explorer, Microsoft Edge

Wenn Sie mehr Konstanz in Ihren Entwürfen anstreben, hilft Ihnen eine JavaScript-Bibliothek mit dem Namen Type Rendering Mix mit lebenden Typografie-Legenden Tim Brown und Bram Stein.

Diese Bibliothek erkennt das Text-Rasterizer und das Kantenglättung Vom Browser verwendete Methode und fügt dem Browser Klassen hinzu html Element, um die Ergebnisse wiederzugeben, zum Beispiel:

In unserem obigen Beispiel möchten wir möglicherweise das Gewicht der Blockquote in Chrome reduzieren. Nachdem Sie Type Rendering Mix in die Seite geladen haben, zeigt eine schnelle Überprüfung die Klasse tr-coretext wurde in Chrome angewendet, was die Tatsache widerspiegelt, dass Kerntext (Mac OS und iOS) für das Rasterisieren verwendet wird.

Wir könnten dann spezifisch auf unseren schwereren Text zielen, indem wir eine Regel wie folgt zu unserem CSS hinzufügen:

.tr-coretext blockquote font-weight: 300; // geringeres Gewicht 

Fazit

Type Rendering Mix gibt es schon seit einigen Jahren, aber es ist ein einfaches und solides Werkzeug, das Designern, die die Art und Weise optimieren möchten, in der sie ihren Typ für verschiedene Browser darstellen, eine zuverlässige Hilfe bietet.