Share
In deze snelle tip laat ik je zien hoe je CSS toepast op basis van de tekstverwerkende engine van elke browser.
Hier is het probleem: afhankelijk van uw browser en besturingssysteem wordt de tekst die door uw browser wordt weergegeven, anders weergegeven. Dat kan problematisch zijn voor ontwerpers, met name diegenen die zich richten op het perfectioneren van typografische details zoals het lettertype, de grootte, het gewicht, de spatiëring, enzovoort.
Dezelfde pagina weergegeven op (van links naar rechts) Chrome Mac OS, Internet Explorer, Microsoft EdgeAls u streeft naar meer consistentie in uw ontwerpen, zal een JavaScript-bibliotheek met de naam Type Rendering Mix door levende typografie-legendes Tim Brown en Bram Stein u helpen.
Deze bibliotheek detecteert de tekst rasterizer en de antialiasing methode gebruikt door de browser en klassen toevoegt aan de html element om de resultaten weer te geven, bijvoorbeeld:
In ons bovenstaande voorbeeld willen we mogelijk het gewicht van de blockquote in Chrome verlagen. Nadat Type Rendering Mix op de pagina is geladen, onthult een snelle inspectie dat de klasse tr-CoreText is toegepast in Chrome, omdat het gebruikmaakt van kerntekst (Mac OS en iOS) voor rasteren.
We kunnen ons dan specifiek richten op onze zwaardere tekst door een regel als deze toe te voegen aan onze CSS:
.tr-coretext blockquote font-weight: 300; // lichter gewicht
Type Rendering Mix bestaat nu al een aantal jaar, maar het is een eenvoudige en solide tool die betrouwbare ondersteuning biedt aan ontwerpers die de manier willen aanpassen waarop hun type over verschillende browsers wordt weergegeven..
Accentsconagua