Skip to content

Instantly share code, notes, and snippets.

@jhogue
Created December 13, 2012 20:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jhogue/4279566 to your computer and use it in GitHub Desktop.
Save jhogue/4279566 to your computer and use it in GitHub Desktop.
A SASS function to emulate what font-size-adjust is meant to do. Until it is widely supported, we can use a combination of math and Modernizr to meet the needs. ¶ The value for $font-size-adjust-value in this function is not calculated in the same way as a value for font-size-adjust. In my real-world example, font-size-adjust: .465; would be the…
/* Not widely supported, can't use this yet */
@mixin font-size-adjust {
-webkit-font-size-adjust: 0.465; /* No support yet */
font-size-adjust: 0.465; /* Firefox only */
}
/* Define these somewhere if you aren't already */
$font-size-adjust-value: 1.15;
$base-font-size: 16px;
/* Since we can't use the above, let's create our own way to do it. */
@mixin fontface-adjust( $pixel, $adjust-value: $font-size-adjust-value, $base-size:$base-font-size ) {
/* Set a default that will do nothing, just in case */
@if $adjust-value == none {
$adjust-value: 1;
}
/* Clear units to make the math easier. Plus, we return EMs anyway */
$pixel: clear-units($pixel);
$base-size: clear-units($base-size);
/* Return the default font-size in ems – then, scale it up if fontface is supported (needs Modernizr) */
font-size: #{$pixel / $base-size}em;
.fontface & {
font-size: #{$pixel*$adjust-value / $base-size}em;
}
}
@jhogue
Copy link
Author

jhogue commented Dec 17, 2012

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