Rask Tips Hvordan Gjenværende Gjenværende Tverrsnitt Gjenspeiler

I dette raske tipset skal jeg vise deg hvordan du bruker CSS basert på hver nettleserens tekstgengivelsesmotor.

Se Screencast

 

Her er tingen: Avhengig av nettleseren og operativsystemet blir teksten som vises av nettleseren din, annerledes. Det kan være problematisk for designere, spesielt de som fokuserer på å perfeksjonere typografiske detaljer, for eksempel skrifttypen, størrelsen, vekten, avstanden og så videre.

Den samme siden som vises på (venstre til høyre) Chrome Mac OS, Internet Explorer, Microsoft Edge

Hvis du sikter på mer konsistens i designene dine, vil et JavaScript-bibliotek ved navn Rendering Mix av levende typografi legender Tim Brown og Bram Stein hjelpe deg ut.

Dette biblioteket registrerer tekst rasterizer og antialiasing Metode som brukes av nettleseren og legger til klasser i html element for å gjenspeile resultatene, for eksempel:

I vårt eksempel ovenfor kan det være lurt å redusere vekten av blockquote i Chrome. Etter å ha lastet Type Rendering Mix inn på siden, avslører en rask inspeksjon at klassen tr-Coretext har blitt brukt i Chrome, noe som gjenspeiler det faktum at det bruker kjernetekst (Mac OS og iOS) for rasterisering.

Vi kunne da spesifikt målrette mot vår tyngre tekst ved å legge til en regel som dette til vårt CSS:

.tr-coretext blockquote font-weight: 300; // lettere vekt

Konklusjon

Type Rendering Mix har eksistert i flere år, men det er et enkelt og solid verktøy som gir pålitelig hjelp til designere som ønsker å finjustere måten deres type blir gjengitt på forskjellige nettlesere.