Pass any valid comma separated list of feature tag–value pairs, always in the form of "tag" value
where value is 0
or 1
. These will be mixed in with the defaults (as in $font-feature-defaults
).
Created
September 15, 2014 19:04
-
-
Save Zegnat/68c9e288f478fd1708a5 to your computer and use it in GitHub Desktop.
Somewhat complete SASS mixin for font-feature-settings.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin font-feature-settings($feature-tag-value...) { | |
$font-feature-defaults: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0; | |
$out: $font-feature-defaults; | |
@if length($feature-tag-value) > 0 { | |
@each $pair in $feature-tag-value { | |
$tag: nth($pair, 1); | |
$nth: index($font-feature-defaults, $tag 0) or index($font-feature-defaults, $tag 1); | |
@if type-of($nth) == number { | |
$step: (); | |
@if $nth > 1 { | |
@for $i from 1 through $nth - 1 { | |
$step: append($step, nth($out, $i), comma); | |
} | |
} | |
$step: append($step, $pair, comma); | |
@if $nth < length($out) { | |
@for $i from $nth + 1 through length($out) { | |
$step: append($step, nth($out, $i), comma); | |
} | |
} | |
$out: $step; | |
} | |
@else { | |
$out: append($out, $pair); | |
} | |
} | |
} | |
-webkit-font-feature-settings: $out; | |
-moz-font-feature-settings: $out; | |
font-feature-settings: $out; | |
} | |
html, body { | |
@include font-feature-settings("dlig" 0); | |
} | |
h1, h2, h3 { | |
@include font-feature-settings("dlig" 1); | |
} | |
abbr { | |
text-transform: uppercase; | |
@include font-feature-settings("smcp" 1, "c2sc" 1); | |
} | |
time { | |
@include font-feature-settings(); | |
} | |
pre, kbd, samp, code { | |
@include font-feature-settings("kern" 0, "liga" 0, "dlig" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "zero" 1); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body { | |
-webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; | |
-moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; | |
font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0; } | |
h1, h2, h3 { | |
-webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1; | |
-moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1; | |
font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1; } | |
abbr { | |
text-transform: uppercase; | |
-webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; | |
-moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; | |
font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "smcp" 1, "c2sc" 1; } | |
time { | |
-webkit-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0; | |
-moz-font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0; | |
font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0; } | |
pre, kbd, samp, code { | |
-webkit-font-feature-settings: "kern" 0, "liga" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "dlig" 0, "zero" 1; | |
-moz-font-feature-settings: "kern" 0, "liga" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "dlig" 0, "zero" 1; | |
font-feature-settings: "kern" 0, "liga" 0, "pnum" 0, "tnum" 1, "onum" 0, "lnum" 1, "dlig" 0, "zero" 1; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment