5
How to resolve this issue in Firefox regarding fonts ?
Unfortunately in Chrome it gets smooth and in Firefox serrated.
2 answers
5
Understanding the difference between Antialies traditional for the Cleartype
See your enlarged image:
Note that the image on the right has colored pixels. As the LCD is not formed by pixels of all colors, but rather small red, green and blue rectangles side by side, this position difference is used to simulate more horizontal pixels (most Lcds for monitors are arranged horizontally).
The Antialias, in turn, makes only an interpolation of pixel integer having 3 times less resolution than Cleartype (however, does not get colored artifacts in the letters).
Enabling Cleartype in Firefox:
Firefox by default uses Antialias instead of Cleartype (subpixel Rendering).
This extension allows you to enable the feature:
https://addons.mozilla.org/en-US/firefox/addon/anti-aliasing-tuner/
If you prefer, you can type about:config in the address field and manually configure the Cleartype options, which are part of this group:
gfx.font_rendering.cleartype_params
However, it is likely to mess up the browser more than solve the problem.
4
It is common, that some browsers do not display the font with anti-aliasing.
I know 3 alternatives with CSS3. Statements:
transform: rotate (-0.0000000001deg);
text-shadow: 0 0 1px rgba(0,0,0,0.3);
font-smooth: always;
Source (in English): https://gist.github.com/dalethedeveloper/1846552
-
Man I tried the 3 ways but it didn’t look good :(
-
The
font-smooth: always;didn’t work
Browser other questions tagged html css css-font-face
You are not signed in. Login or sign up in order to post.
Aren’t you being too perfectionist? I wouldn’t even say that the problem is Firefox, but resolution. If you open the site on a smartphone, whether in Chrome or Firefox, the font will be perfect, since the resolution would be "higher" on the phone. The end user won’t even notice this serration. And another, the way to render font in Chrome is different from Firefox, so don’t expect equal results in different technologies. " Anti-aliasing" is a Gambi created to compensate for the low resolution. Hug.
– Rodrigo Mello
The font-Smooth, to work, only for Mac OSX operating system: http://caniuse.com/#feat=font-Smooth
– user44090
Just for the record, the traditional "Antialiasing" is obsolete technology. Today it is used subpixel, considering that practically everyone uses LCD. (called Cleartype in windows). In the screenshot it is evident that Firefox is doing traditional Antialias, and Chrome subpixel, hence the difference. It may be a configuration or implementation problem. (for those who do not know what it is, just enlarge the image of the post and see the difference between the two sides. Antialias is P&B, cleartype is colored)
– Bacco