Font-Smoothing

Control the application of font anti-aliasing.

The proposed font-smooth CSS property is not on the CSS standards track, presumably because it would make more sense to build these controls into the browser or OS than add them to every webpage. The primary reason to tweak font anti-aliasing is for icon fonts and there are vendor prefixes to support this.

      -webkit-font-smoothing: { none | antialiased | subpixel-antialiased  ;}

      -moz-osx-font-smoothing: { auto | inherit | unset | grayscale |  ;}

subpixel-antialiased - On most non-retina displays this will give the sharpest text.

antialiased - Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.

none - Turn font smoothing off, show the text with jagged sharp edges.

grayscale - Render text with grayscale antialiasing, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.

auto - Allow the browser to select an optimization for font smoothing, typically greyscale.

inherit - inherit from the parent element.

Mobile devices don’t use subpixel rendering due to having to suport both vertical and horizontal screen orientations. Chrome briefly removed and then re-instated support for -webkit-font-smoothing in 2012.

Examples:
h1 { -webkit-font-smoothing: antialiased; }
.ss64class { -webkit-font-smoothing: subpixel-antialiased; }

#SS64id { -moz-osx-font-smoothing: grayscale; }

Try it:

Excellence is not an act but a habit. The things you do the most are the things you will do the best.

Though present in early (2002) drafts of CSS3 Fonts, font-smooth has been removed from the specification and is currently not on the standard track. Browser Support: Chrome / Safari / Gecko(OSX only).

“It's never paid to bet against America. We come through things, but its not always a smooth ride” ~ Warren Buffett

Related:

Examples of -webkit-font-smoothing
Adobe TypeKit blog - Type rendering
font-size-adjust - Attempt to normalise the font size. CSS3
font-feature-settings - Adjust Kerning


© Copyright SS64.com 1999-2016
Some rights reserved