| /** | |
| * Test for @font-face support | |
| * @author Filament Group | |
| * @link https://github.com/filamentgroup/face-off | |
| * @param {Element} win | |
| * @param {Null} undefined | |
| * @return {Boolean} | |
| */ | |
| var isFontFaceSupported = (function( win, undefined ) { |
| // Stick all your icons in a subfolder in your images folder. Put retina versions in a subfolder of that called "@2x". | |
| $sprites: sprite-map("NAME_OF_SUBFOLDER/*.png"); | |
| $sprites2x: sprite-map("NAME_OF_SUBFOLDER/@2x/*.png"); | |
| // stolen from 37signals | |
| @mixin retina-media() { | |
| @media (min--moz-device-pixel-ratio: 1.3), | |
| (-webkit-min-device-pixel-ratio: 1.3), | |
| (min-device-pixel-ratio: 1.3), | |
| (min-resolution: 1.3dppx) { |
| /* | |
| * a small mixin for easy use of rem with px as fallback | |
| * usage: @include x-rem(font-size, 14px) | |
| * usage: @include x-rem(marign, 0 12px 2 1.2) | |
| * usage: @include x-rem(padding, 1.5 24px) | |
| * | |
| * thanks to Eric Meyer for https://github.com/ericam/susy | |
| * and Hans Christian Reinl for http://drublic.de/blog/rem-fallback-sass-less/ | |
| */ | |
| @mixin x-rem($property, $values) { |
#Techniques for Anti-Aliasing @font-face on Windows
It all started with an email from a client: Do these fonts look funky to you? The title is prickly.
The font in question was Port Lligat Sans from Google Web Fonts.
The "prickly" is aliasing caused by lack of hinting
