#Webkit font smoothing free
#Webkit font smoothing windows

#Webkit font smoothing free

It’s not an ideal situation.įeel free to comment on this post if you know of a workaround that eliminates the problem without one having to force regular anti-aliasing. Controls the application of anti-aliasing when fonts are rendered in the element. Either way, you’ll end up with a) thinner (and uglier) fonts even before a transition or b) a slightly less noticeable change-but a change nonetheless-in font rendering during a transition.

#Webkit font smoothing windows

This is generally a problem in Chrome running on Windows only. This Stack Overflow thread recommends using either -webkit-transform: translateZ(0px) or, curiously, explicitly setting sub-pixel smoothing ( -webkit-font-smoothing: subpixel-antialiased) even though it should be enabled by default. Chrome doesnt render the fonts like Firefox or any other browser does. It’s usually employed to lighten text or icons that are placed on dark backgrounds, almost as a shortcut to avoid loading an additional (but perhaps more appropriate) Light or Hairline web font. Mainly because it essentially cuts font pixels in half, it also only works on webkit.

I haven’t found a satisfactory workaround. webkit-font-smoothing: antialiased Asthetically as we’ve seen, using grayscale anti-aliasing makes things appear lighter and thinner. Font smoothing is interesting, especially with an antialiased property. grayscale - Render text with grayscale antialiasing, as. WebKit uses sub-pixel anti-aliasing for font smoothing by default apparently this gets disabled when a GPU-accelerated CSS transition is executed, causing the text to be rendered using “regular” anti-aliasing. Syntax auto - Let the browser decide (Uses subpixel anti-aliasing when available this is the default) none - Turn font smoothing off display text with. Syntax auto - Allow the browser to select an optimization for font smoothing, typically grayscale. A couple of days ago, I was messing about with CSS3 transitions and I noticed that, in Safari at least, text rendering gets messed up for the duration of the transition.