Share
I det här snabba tipset ska jag visa dig hur du applicerar CSS baserat på varje webbläsares textgivningsmotor.
Det här är saken: beroende på din webbläsare och operativsystem visas texten som visas av din webbläsare annorlunda. Det kan vara problematiskt för designers, särskilt de som fokuserar på att perfekta typografiska detaljer som typsnittet, storleken, vikten, avståndet och så vidare.
Samma sida som visas på (vänster mot höger) Chrome Mac OS, Internet Explorer, Microsoft EdgeOm du strävar efter mer konsistens i dina mönster kommer ett JavaScript-bibliotek med namnet Type Rendering Mix av levande typografi legender Tim Brown och Bram Stein att hjälpa dig.
Detta bibliotek upptäcker textrasterizer och den antialiasing Metod som används av webbläsaren och lägger till klasser i html element för att återspegla resultaten, till exempel:
I vårt exempel ovan kanske vi vill minska vikten av blockquote i Chrome. Efter att ha laddat Typ Rendering Mix i sidan avslöjar en snabb inspektion att klassen tr-Coretext har tillämpats i Chrome, vilket återspeglar det faktum att det använder sig av kärntext (Mac OS och iOS) för rasterisering.
Vi kunde då specifikt rikta in vår tyngre text genom att lägga till en regel så här till vår CSS:
.tr-coretext blockquote font-weight: 300; // lättare vikt
Typ Rendering Mix har funnits i ett antal år nu, men det är ett enkelt och solidt verktyg som erbjuder tillförlitlig hjälp till designers som vill tweak hur deras typ görs över olika webbläsare.
Accentsconagua