Skip to content

Instantly share code, notes, and snippets.

@adamstac

adamstac/_font-smoothing.scss

Created February 27, 2013 15:46
Show Gist options
  • Star 21 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save adamstac/5048881 to your computer and use it in GitHub Desktop.
Save adamstac/5048881 to your computer and use it in GitHub Desktop.
Download ZIP
WebKit font-smoothing Sass mixin
Raw
_font-smoothing.scss
// WebKit font-smoothing
//------------------------------------------------
// References:
//
// 1. http://maxvoltar.com/sandbox/fontsmoothing/
// 2. http://maxvoltar.com/archive/-webkit-font-smoothing
//
// Values: none, antialiased (default), subpixel-antialiased
//
@mixin font-smoothing($value: antialiased) {
-webkit-font-smoothing: $value;
}
@jameswilson
Copy link

For better cross-browser support, I recommend also adding -moz-osx-font-smoothing support.

@mixin font-smoothing($value: antialiased) {
  @if $value == antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  @else {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
  }
}

From: http://maximilianhoffmann.com/posts/better-font-rendering-on-osx

@andypmw
Copy link

andypmw commented Feb 4, 2016

Hi @adamstac and @jameswilson,
thanks for the snippet.

@fabiofidanza
Copy link

Thanks for sharing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment