CODEWITHSUNDEEP
cssfirefoxfonts
wowpatrick
wowpatrick

Reputation: 5180

-webkit-font-smoothing: antialiased equivalent in firefox?

I'm using the very useful CSS property -webkit-font-smoothing: antialiased in webkit browsers to ensure nice fine text on headlines etc. Is there an equivalent property in Firefox?

Font in WebKit with -webkit-font-smoothing: antialiased:

enter image description here

Font in Firefox:

enter image description here

As you can see the text in Firefox is fatter than in Webkit. Without -webkit-font-smoothing: antialiased, the text looks the same in Webkit as in Firefox.

Upvotes: 27

Views: 27927

Answers (4)

Marat Tanalin
Marat Tanalin

Reputation: 14123

Firefox 25+ (2013-10-29) supports a new macOS-only nonstandard CSS property -moz-osx-font-smoothing effectively similar to the WebKit’s -webkit-font-smoothing.

So this code should provide consistent results in Firefox and WebKit:

.example {
    -moz-osx-font-smoothing: grayscale;   /* Firefox */
     -webkit-font-smoothing: antialiased; /* WebKit  */
}

Upvotes: 35

borkie
borkie

Reputation: 393

Problem is -webkit-font-smoothing: antialiased, which disable standard sub-pixel font smoothing. Try read this

Upvotes: 6

Boris Zbarsky
Boris Zbarsky

Reputation: 35054

Firefox has the behavior you're after by default, as far as I know, so there's no need to request it explicitly...

Upvotes: 0

Jason
Jason

Reputation: 3360

At one point firefox had a font-smooth, but it's been removed and as far as I know is not included at all in the current track. I did some googling and didn't see any indication that there will be any change to that.

As an alternative you could try a workaround like: http://www.elfboy.com/blog/text-shadow_anti-aliasing/.

Upvotes: 1

Related Questions