Sfat rapid Cum să consolidezi în mod consecvent texturile Cross-browser

În acest sfat rapid vă voi arăta cum să aplicați CSS pe baza fiecărui motor de redare a textului fiecărui browser.

Uita-te la Screencast

 

Iată lucrurile: în funcție de browser și de sistemul dvs. de operare, textul afișat de browserul dvs. va fi redat diferit. Aceasta poate fi problematică pentru designeri, în special pentru cei care se concentrează pe perfecționarea detaliilor tipografice, cum ar fi tipul de text, mărimea, greutatea, spațierea și așa mai departe.

Aceeași pagină este afișată pe (la stânga la dreapta) Chrome Mac OS, Internet Explorer, Microsoft Edge

Dacă vizează mai multă coerență în desenele dvs., o bibliotecă JavaScript cu numele de tip Rendering Mix, trăind legende tipografice, Tim Brown și Bram Stein vă vor ajuta.

Această bibliotecă detectează text rasterizator si antialiasing metoda utilizată de browser și adaugă clase la html element pentru a reflecta rezultatele, de exemplu:

În exemplul nostru de mai sus, este posibil să reducem greutatea blocului de blocare în Chrome. După ce a fost încărcat tipul de Rendering Mix pe pagină, o inspecție rapidă dezvăluie clasa tr-coretext a fost aplicată în Chrome, reflectând faptul că utilizează Text Core (Mac OS și iOS) pentru rasterizare.

Am putea viza în mod special textul nostru mai greu prin adăugarea unei reguli ca aceasta la CSS:

.tr-coretextul blocului font-weight: 300; // greutate mai ușoară

Concluzie

Type Rendering Mix a fost în jur de câțiva ani, dar este un instrument simplu și solid, oferind un ajutor fiabil proiectanților care doresc să ajusteze modul în care tipul lor este redat în diferite browsere.