Chrome font rendering windows 7

Tijdens het testen van de nieuwe Webparking website viel ons op dat deze in Chrome heel lelijk renderde qua font in Windows 7. Nog even getest op andere devices en platforms maar daar was alles prima. Na enig onderzoek kwamen we diverse melden hiervan tegen en het lijkt te maken te hebben met een ongelukkige samenloop van Windows font-rendering en Chrome. In Firefox en Internet Explorer zag het er wel netjes uit.

De oplossingen voor Chrome font rendering windows 7

Die liepen redelijk uiteen. Nu gaan de meeste oplossingen uit van een andere volgorde van CSS markup voor het font maar; in dit geval is het een Google web font dus de exacte stack is niet aan ons om te bepalen. Na nog vele oplossingen geprobeerd te hebben legden wij ons er al bijna bij neer dat het zo was. Het leek namelijk iets te zijn waar ooit vanuit Chrome wel een oplossing voor zou komen.

Daar een prettige rendering wel zo fijn was hebben wij uiteindelijk het gewenste effect bereikt middels een hele kleine text-stroke.

Verschil text-stroke 0.2px

Hieronder een afbeelding met het visuele verschil. bovenste afbeelding is zonder de text-stroke en de onderste afbeelding is met de text-stroke;

Untitled-1
De oplossing in code

Absoluut niet perfect maar beter (zie o.a. de P in apps);

-webkit-font-smoothing: antialiased !important;
-webkit-text-stroke: 0.2px;

Geef een reactie

Jouw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *