├── .gitignore ├── LICENSE.md ├── test ├── sass.js └── basic.js ├── package.json ├── scripts └── css.js ├── README.md ├── css ├── utility-opentype.min.css └── utility-opentype.css └── index.css /.gitignore: -------------------------------------------------------------------------------- 1 | # OS 2 | .DS_Store 3 | 4 | # Logs 5 | logs 6 | *.log* 7 | 8 | # Compiled binary addons (http://nodejs.org/api/addons.html) 9 | build/Release 10 | 11 | # Dependency directory 12 | node_modules 13 | components 14 | bower_components 15 | .eyeglass_cache 16 | 17 | # Compile directories 18 | www/ 19 | build/ 20 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright © 2015 [Kenneth Ormandy](http://kennethormandy.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the “Software”), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /test/sass.js: -------------------------------------------------------------------------------- 1 | var assert = require('assert') 2 | var sass = require('node-sass') 3 | var eyeglass = require('eyeglass') 4 | var cssstats = require('cssstats') 5 | 6 | var scss = '@import "utility-opentype"; body { font-family: Georgia, serif; } abbr { text-transform: uppercase; @extend .c2sc; }' 7 | var stats 8 | var css 9 | 10 | describe('sass', function () { 11 | 12 | it('should compile source file', function (done) { 13 | assert.doesNotThrow(function () { 14 | sass.render(eyeglass({ file: 'index.css' }), function(err, result) { 15 | if (err) throw err 16 | result.css.toString() 17 | done() 18 | }) 19 | }) 20 | }) 21 | 22 | it('should compile', function (done) { 23 | assert.doesNotThrow(function () { 24 | sass.render(eyeglass({ data: scss }), function(err, result) { 25 | if (err) throw err 26 | css = result.css.toString() 27 | done() 28 | }) 29 | }) 30 | }) 31 | 32 | it('should compile to string', function () { 33 | assert.equal(typeof css, 'string') 34 | }) 35 | 36 | it('should be css', function () { 37 | assert.doesNotThrow(function () { 38 | stats = cssstats(css, { safe: false }) 39 | }) 40 | }) 41 | 42 | }) 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "utility-opentype", 3 | "version": "0.1.4", 4 | "description": "Simple, CSS utility classes for advanced typographic features.", 5 | "homepage": "http://utility-opentype.kennethormandy.com", 6 | "author": "Kenneth Ormandy (http://kennethormandy.com)", 7 | "repository": "kennethormandy/utility-opentype", 8 | "license": "MIT", 9 | "keywords": [ 10 | "css", 11 | "oocss", 12 | "basscss", 13 | "typography", 14 | "opentype", 15 | "font-feature-settings", 16 | "eyeglass-module", 17 | "sass" 18 | ], 19 | "ignore": [ 20 | "test" 21 | ], 22 | "eyeglass": { 23 | "sassDir": "./css/utility-opentype.css", 24 | "name": "utility-opentype", 25 | "needs": "^0.7.x" 26 | }, 27 | "devDependencies": { 28 | "assert": "1.3.0", 29 | "autoprefixer": "6.1.2", 30 | "clean-css": "3.4.8", 31 | "css-mixed-properties": "1.1.0", 32 | "css-mqpacker": "4.0.0", 33 | "cssnext": "1.8.4", 34 | "cssstats": "2.1.2", 35 | "eyeglass": "sass-eyeglass/eyeglass#a5ae156", 36 | "filesize": "3.2.1", 37 | "mocha": "2.3.4", 38 | "node-sass": "3.4.2", 39 | "postcss": "5.0.12", 40 | "postcss-move-media": "1.0.0-pre", 41 | "postcss-nested": "1.0.0", 42 | "postcss-reporter": "1.3.3", 43 | "postcss-scss": "0.1.3", 44 | "watch": "0.16.0" 45 | }, 46 | "scripts": { 47 | "pretest": "npm run css", 48 | "test": "mocha test", 49 | "css": "node scripts/css", 50 | "start": "npm run css", 51 | "watch:css": "watch 'npm run css' index.css" 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /test/basic.js: -------------------------------------------------------------------------------- 1 | // MIT via http://git.io/vR4SG 2 | 3 | var fs = require('fs') 4 | var path = require('path') 5 | var assert = require('assert') 6 | var cssnext = require('cssnext') 7 | var cssstats = require('cssstats') 8 | var mixed = require('css-mixed-properties') 9 | var Cleancss = require('clean-css') 10 | 11 | var src = fs.readFileSync(path.join(__dirname, '../index.css'), 'utf8') 12 | var css 13 | var stats 14 | 15 | describe('basic', function () { 16 | 17 | it('should compile', function () { 18 | assert.doesNotThrow(function () { 19 | css = cssnext(src) 20 | }) 21 | }) 22 | 23 | it('should compile to string', function () { 24 | assert.equal(typeof css, 'string') 25 | }) 26 | 27 | it('should be css', function () { 28 | assert.doesNotThrow(function () { 29 | stats = cssstats(css, { safe: false }) 30 | }) 31 | }) 32 | 33 | it('should have rules', function () { 34 | assert(stats.rules.total > 0) 35 | }) 36 | 37 | it('should have declarations', function () { 38 | assert(stats.declarations.total > 0) 39 | }) 40 | 41 | it('should have properties', function () { 42 | assert(Object.keys(stats.declarations.properties).length > 0) 43 | }) 44 | 45 | it('should not have a high mix of structure and skin properties', function () { 46 | var mix = mixed(css) 47 | var max = 0 48 | mix.warnings.forEach(function (warning) { 49 | if (warning.score > max) { 50 | max = warning.score 51 | } 52 | }) 53 | assert(max < 5) 54 | }) 55 | 56 | it('should not break perf budget', function () { 57 | var max = 1750 58 | var minified = new Cleancss({ advanced: false, }).minify(css).styles 59 | var minifiedStats = cssstats(minified, { safe: false }) 60 | 61 | console.log(minifiedStats.gzipSize) 62 | assert(minifiedStats.gzipSize <= max) 63 | 64 | }) 65 | 66 | }) 67 | -------------------------------------------------------------------------------- /scripts/css.js: -------------------------------------------------------------------------------- 1 | // Based on Basscss’ build script, MIT via http://git.io/vRpzw 2 | var fs = require('fs') 3 | var path = require('path') 4 | var postcss = require('postcss') 5 | var cssnext = require('cssnext') 6 | var cssstats = require('cssstats') 7 | var reporter = require('postcss-reporter') 8 | var nested = require('postcss-nested') 9 | var filesize = require('filesize') 10 | var Cleancss = require('clean-css') 11 | var autoprefixer = require('autoprefixer') 12 | var packer = require('css-mqpacker') 13 | var mover = require('postcss-move-media') 14 | var pkg = require('../package.json') 15 | 16 | 17 | var removeComments = postcss.plugin('remove-comments', function(opts) { 18 | opts = opts || {} 19 | return function(root) { 20 | root.eachComment(function(comment) { 21 | comment.removeSelf() 22 | }) 23 | } 24 | }) 25 | 26 | compile = function() { 27 | var dir = path.join(__dirname, '../') 28 | var dest = path.join(__dirname, '../css/') 29 | 30 | var src = fs.readFileSync(dir + 'index.css', 'utf8') 31 | 32 | var result = 33 | postcss() 34 | .use(cssnext({ 35 | features: { 36 | customProperties: { 37 | strict: false, // disable variable fallbacks from being redundantly added 38 | }, 39 | rem: false, 40 | pseudoElements: false, 41 | colorRgba: false 42 | } 43 | })) 44 | .use(removeComments()) 45 | .use(cssstats()) 46 | .use(autoprefixer()) 47 | .use(nested()) 48 | .use(packer()) 49 | .use(mover()) 50 | .use(reporter()) 51 | .process(src) 52 | 53 | var css = result.css 54 | var minified = new Cleancss({ 55 | advanced: true, 56 | }).minify(css).styles 57 | 58 | var stats = result.messages.filter(function (message) { 59 | return message.stats 60 | }) 61 | .map(function (message) { 62 | return message.stats 63 | })[0] 64 | 65 | console.log('Size: ' + filesize(stats.size)) 66 | console.log('Gzipped: ' + filesize(stats.gzipSize)) 67 | console.log('Rules: ' + stats.rules.total) 68 | console.log('Selectors: ' + stats.selectors.total) 69 | console.log('Declarations: ' + stats.declarations.total) 70 | 71 | css = 72 | [ 73 | '/*', 74 | '', 75 | ' Utility OpenType v' + pkg.version, 76 | ' ' + pkg.description, 77 | ' ' + pkg.homepage, 78 | '', 79 | '*/', 80 | '', 81 | '', 82 | css 83 | ].join('\n') 84 | 85 | fs.writeFileSync(dest + pkg.name + '.css', css) 86 | fs.writeFileSync(dest + pkg.name + '.min.css', minified) 87 | console.log('Compiled to css/' + pkg.name + '.css and css/' + pkg.name + '.min.css') 88 | 89 | } 90 | 91 | compile() 92 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![](http://utility-opentype.kennethormandy.com/media/og-image.gif)](http://utility-opentype.kennethormandy.com) 2 | 3 | *** 4 | 5 | # Utility OpenType 6 | 7 | Simple, CSS utility classes for advanced typographic features. Falls back gracefully through feature queries. Less than 1.75kB gzipped. [—@kennethormandy](https://twitter.com/kennethormandy) 8 | 9 | [Utility OpenType](http://utility-opentype.kennethormandy.com) helps you make the most of the font that you are loading in, reducing convoluted CSS into four-letter, typographic utility classes, because: 10 | 11 | 1. OpenType features should be as **easy to apply** as bold and italics. 12 | 2. OpenType features should **cascade predictably**. 13 | 3. OpenType features should **fallback gracefully**. 14 | 15 | This is described in more detail in the [design decisions](http://utility-opentype.kennethormandy.com/#design-decisions). The following examples are supported on Chrome, Firefox, and Internet Explorer 10+ and fallback as gracefully [elsewhere](http://utility-opentype.kennethormandy.com/#browser-support). Works on its own, or alongside frameworks like [Basscss](http://basscss.com). 16 | 17 | ## Get started 18 | 19 | Utility OpenType is ready to use with Sass, PostCSS, or vanilla CSS. If you’re using Sass or PostCSS, install it through npm: 20 | 21 | ```sh 22 | npm install --save utility-opentype 23 | ``` 24 | 25 | Then, include it within your source files: 26 | 27 | ```scss 28 | @import "utility-opentype"; 29 | ``` 30 | 31 | If you’re using Sass without [Eyeglass](https://github.com/sass-eyeglass/eyeglass) modules, you will need to include the actual path to the file in the `node_modules` directory, for example: 32 | 33 | ```scss 34 | @import "../node_modules/utility-opentype/css/utility-opentype"; 35 | ``` 36 | 37 | If you’d like to use the css directly, download the latest version of the compiled file, or reference the hosted CDN version in your HTML: 38 | 39 | ```html 40 | 41 | ``` 42 | 43 | That’s it! You’re ready to use the classes within your markup. 44 | 45 | ## Classes 46 | 47 | [Read the full docs with examples.](http://utility-opentype.kennethormandy.com) 48 | 49 | - [`.liga`](http://utility-opentype.kennethormandy.com/#liga) – Common Ligatures 50 | - [`.dlig`](http://utility-opentype.kennethormandy.com/#dlig) – Discretionary Ligatures 51 | - [`.smcp`](http://utility-opentype.kennethormandy.com/#smcp) – Proper Small Caps 52 | - [`.c2sc`](http://utility-opentype.kennethormandy.com/#c2sc) – Caps to Small Caps 53 | - [`.caps`](http://utility-opentype.kennethormandy.com/#caps) – Small Caps and Caps to Small Caps, still requires docs 54 | - [`.case`](http://utility-opentype.kennethormandy.com/#case) – Case Sensitive Forms 55 | - [`.titl`](http://utility-opentype.kennethormandy.com/#titl) - Titling alternates 56 | - [`.calt`](http://utility-opentype.kennethormandy.com/#calt) – Contextual alternates 57 | - [`.hist`](http://utility-opentype.kennethormandy.com/#hist) – Historical forms 58 | - [`.swsh`](http://utility-opentype.kennethormandy.com/#swsh) – Swashes, 1–3, still requires docs 59 | - [`.salt`](http://utility-opentype.kennethormandy.com/#salt) – Stylistic Alternates, numbered 1–3 classes still require docs 60 | - [`.ss01`](http://utility-opentype.kennethormandy.com/#ss01) – Stylistic Sets, 1–20, still requires docs 61 | - [`.frac`](http://utility-opentype.kennethormandy.com/#frac) – Diagonal Fractions 62 | - [`.afrc`](http://utility-opentype.kennethormandy.com/#afrc) – Alternate Fractions, still requires docs 63 | - [`.ordn`](http://utility-opentype.kennethormandy.com/#ordn) – Ordinals 64 | - [`.sups`](http://utility-opentype.kennethormandy.com/#sups) – Superscripts 65 | - [`.subs`](http://utility-opentype.kennethormandy.com/#subs) – Subscripts 66 | - [`.sinf`](http://utility-opentype.kennethormandy.com/#sinf) – Scientific Inferiors 67 | - [`.lnum`](http://utility-opentype.kennethormandy.com/#lnum) – Lining numbers 68 | - [`.onum`](http://utility-opentype.kennethormandy.com/#onum) – Oldstyle numbers 69 | - [`.pnum`](http://utility-opentype.kennethormandy.com/#pnum) – Proportinal numbers 70 | - [`.tnum`](http://utility-opentype.kennethormandy.com/#tnum) – Tabular numbers 71 | - [`.zero`](http://utility-opentype.kennethormandy.com/#zero) – Slashes Zero 72 | 73 | ## Running locally 74 | 75 | ```sh 76 | git clone https://github.com/kennethormandy/utility-opentype 77 | cd utility-opentype 78 | 79 | # Install development dependencies 80 | npm install 81 | 82 | # Run the test basic PostCSS tests 83 | npm test 84 | ``` 85 | 86 | ## License 87 | 88 | [The MIT License (MIT)](LICENSE.md) 89 | 90 | Copyright © 2015 [Kenneth Ormandy](http://kennethormandy.com) 91 | -------------------------------------------------------------------------------- /css/utility-opentype.min.css: -------------------------------------------------------------------------------- 1 | .liga{-ms-font-feature-settings:"liga";-webkit-font-variant-ligatures:common-ligatures;font-variant-ligatures:common-ligatures}@supports not ((-webkit-font-variant-ligatures:common-ligatures) or (font-variant-ligatures:common-ligatures)){.liga{-webkit-font-feature-settings:"liga","liga","clig";font-feature-settings:"liga","liga","clig"}}.dlig{-ms-font-feature-settings:"dlig";-webkit-font-variant-ligatures:discretionary-ligatures;font-variant-ligatures:discretionary-ligatures}@supports not ((-webkit-font-variant-ligatures:discretionary-ligatures) or (font-variant-ligatures:discretionary-ligatures)){.dlig{-webkit-font-feature-settings:"dlig","dlig";font-feature-settings:"dlig","dlig"}}.smcp{text-transform:uppercase;-ms-font-feature-settings:"lnum","smcp","c2sc" 0}@supports not (font-variant-caps:small-caps){.smcp{text-transform:inherit;-webkit-font-feature-settings:"onum","smcp","c2sc" 0;font-feature-settings:"onum","smcp","c2sc" 0}}@supports (font-variant-caps:small-caps){.smcp{text-transform:inherit;-webkit-font-feature-settings:"c2sc";font-feature-settings:"c2sc";font-variant-caps:small-caps}}.c2sc,.c2sc.smcp,.caps{font-variant-caps:all-small-caps}.c2sc{text-transform:uppercase;-ms-font-feature-settings:"smcp" 0,"c2sc"}@supports (font-variant-caps:all-small-caps) or (font-feature-settings:"c2sc"){.c2sc{text-transform:lowercase}}@supports not (font-variant-caps:all-small-caps){.c2sc{-webkit-font-feature-settings:"onum","smcp" 0,"c2sc","smcp","c2sc";font-feature-settings:"onum","smcp" 0,"c2sc","smcp","c2sc"}}.c2sc.smcp,.caps{text-transform:uppercase;-ms-font-feature-settings:"smcp","c2sc"}@supports ((-webkit-font-feature-settings:"smcp","c2sc") or (font-feature-settings:"smcp","c2sc")){@supports not (font-variant-caps:all-small-caps){.c2sc.smcp,.caps{text-transform:inherit;-webkit-font-feature-settings:"smcp","c2sc","smcp","c2sc";font-feature-settings:"smcp","c2sc","smcp","c2sc"}}}@supports not (font-variant-caps:small-caps){@supports not (font-variant-numeric:oldstyle-nums){.smcp.onum{-webkit-font-feature-settings:"onum","smcp" 1;font-feature-settings:"onum","smcp" 1}}}@supports not (font-variant-caps:all-small-caps){@supports not (font-variant-numeric:oldstyle-nums){.c2sc.onum,.caps.onum{text-transform:lowercase;-webkit-font-feature-settings:"onum","smcp" 1;font-feature-settings:"onum","smcp" 1}}}.case{-webkit-font-feature-settings:"case";font-feature-settings:"case"}.titl{-ms-font-feature-settings:"titl";font-variant-caps:titling-caps}@supports not (font-variant-caps:titling-caps){.titl{-webkit-font-feature-settings:"titl","titl";font-feature-settings:"titl","titl"}}.calt{-ms-font-feature-settings:"calt";-webkit-font-variant-ligatures:contextual;font-variant-ligatures:contextual}@supports not ((-webkit-font-variant-ligatures:contextual) or (font-variant-ligatures:contextual)){.calt{-webkit-font-feature-settings:"calt","calt";font-feature-settings:"calt","calt"}}.hist{-ms-font-feature-settings:"hist";font-variant-alternates:historical-forms}@supports not (font-variant-alternates:historical-forms){.hist{-webkit-font-feature-settings:"hist";font-feature-settings:"hist"}}.swsh,.swsh-1{-webkit-font-feature-settings:"swsh";font-feature-settings:"swsh"}.swsh-2{-webkit-font-feature-settings:"swsh" 2;font-feature-settings:"swsh" 2}.swsh-3{-webkit-font-feature-settings:"swsh" 3;font-feature-settings:"swsh" 3}.salt,.salt-1{-webkit-font-feature-settings:"salt";font-feature-settings:"salt"}.salt-2{-webkit-font-feature-settings:"salt" 2;font-feature-settings:"salt" 2}.salt-3{-webkit-font-feature-settings:"salt" 3;font-feature-settings:"salt" 3}.ss01{-webkit-font-feature-settings:"ss01";font-feature-settings:"ss01"}.ss02{-webkit-font-feature-settings:"ss02";font-feature-settings:"ss02"}.ss03{-webkit-font-feature-settings:"ss03";font-feature-settings:"ss03"}.ss04{-webkit-font-feature-settings:"ss04";font-feature-settings:"ss04"}.ss05{-webkit-font-feature-settings:"ss05";font-feature-settings:"ss05"}.ss06{-webkit-font-feature-settings:"ss06";font-feature-settings:"ss06"}.ss07{-webkit-font-feature-settings:"ss07";font-feature-settings:"ss07"}.ss08{-webkit-font-feature-settings:"ss08";font-feature-settings:"ss08"}.ss09{-webkit-font-feature-settings:"ss09";font-feature-settings:"ss09"}.ss10{-webkit-font-feature-settings:"ss10";font-feature-settings:"ss10"}.ss11{-webkit-font-feature-settings:"ss11";font-feature-settings:"ss11"}.ss12{-webkit-font-feature-settings:"ss12";font-feature-settings:"ss12"}.ss13{-webkit-font-feature-settings:"ss13";font-feature-settings:"ss13"}.ss14{-webkit-font-feature-settings:"ss14";font-feature-settings:"ss14"}.ss15{-webkit-font-feature-settings:"ss15";font-feature-settings:"ss15"}.ss16{-webkit-font-feature-settings:"ss16";font-feature-settings:"ss16"}.ss17{-webkit-font-feature-settings:"ss17";font-feature-settings:"ss17"}.ss18{-webkit-font-feature-settings:"ss18";font-feature-settings:"ss18"}.ss19{-webkit-font-feature-settings:"ss19";font-feature-settings:"ss19"}.ss20{-webkit-font-feature-settings:"ss20";font-feature-settings:"ss20"}.frac{-ms-font-feature-settings:"frac";font-variant-numeric:diagonal-fractions}@supports not (font-variant-numeric:diagonal-fractions){.frac{-webkit-font-feature-settings:"frac","frac";font-feature-settings:"frac","frac"}}.afrc{-ms-font-feature-settings:"afrc";font-variant-numeric:stacked-fractions}@supports not (font-variant-numeric:stacked-fractions){.afrc{-webkit-font-feature-settings:"afrc","afrc";font-feature-settings:"afrc","afrc"}}.ordn{-ms-font-feature-settings:"ordn";font-variant-numeric:ordinal}@supports not (font-variant-numeric:ordinal){.ordn{-webkit-font-feature-settings:"ordn","ordn";font-feature-settings:"ordn","ordn"}}.sups{font-variant-position:super}@supports not (font-variant-position:sup){.sups{-webkit-font-feature-settings:"sups","sups";font-feature-settings:"sups","sups"}@supports ((-webkit-font-feature-settings:"sups") or (font-feature-settings:"sups")){.sups{font-size:1em;vertical-align:baseline}}@supports (overflow:-webkit-marquee) and (justify-content:inherit){.sups{vertical-align:super}}}.sinf,.subs{font-size:inherit;font-variant-position:sub}@supports not (font-variant-position:sub){.sinf,.subs{-webkit-font-feature-settings:"subs","subs";font-feature-settings:"subs","subs"}@supports ((-webkit-font-feature-settings:"subs") or (font-feature-settings:"subs")){.sinf,.subs{font-size:1em;vertical-align:baseline}}@supports (overflow:-webkit-marquee) and (justify-content:inherit){.sinf,.subs{vertical-align:sub;font-size:smaller}}}@supports ((-webkit-font-feature-settings:"sinf") or (font-feature-settings:"sinf")){.sinf{font-variant-position:normal;-webkit-font-feature-settings:"sinf","subs" off,"sups" off;font-feature-settings:"sinf","subs" off,"sups" off;vertical-align:baseline}}@supports (overflow:-webkit-marquee) and (justify-content:inherit){.sinf{vertical-align:sub;font-size:smaller}}.lnum{font-variant-numeric:lining-nums}@supports not (font-variant-numeric:lining-nums){.lnum{-webkit-font-feature-settings:"lnum","onum" 0,"lnum";font-feature-settings:"lnum","onum" 0,"lnum"}}.onum{font-variant-numeric:oldstyle-nums}@supports not (font-variant-numeric:oldstyle-nums){.onum{-webkit-font-feature-settings:"lnum" 0,"onum","onum";font-feature-settings:"lnum" 0,"onum","onum"}}.pnum{font-variant-numeric:proportional-nums}@supports not (font-variant-numeric:proportional-nums){.pnum{-webkit-font-feature-settings:"pnum","tnum" 0,"pnum";font-feature-settings:"pnum","tnum" 0,"pnum"}}.tnum{font-variant-numeric:tabular-nums}@supports not (font-variant-numeric:tabular-nums){.tnum{-webkit-font-feature-settings:"pnum" 0,"tnum","tnum";font-feature-settings:"pnum" 0,"tnum","tnum"}}.lnum.pnum{-ms-font-feature-settings:"lnum","onum" 0,"pnum","tnum" 0}@supports not ((-webkit-font-feature-settings:"onum" inherit) or (font-feature-settings:"onum" inherit)){.lnum.pnum{-webkit-font-feature-settings:"lnum","onum" 0,"pnum","tnum" 0;font-feature-settings:"lnum","onum" 0,"pnum","tnum" 0}}.lnum.tnum{-ms-font-feature-settings:"lnum","onum" 0,"pnum" 0,"tnum"}@supports not ((-webkit-font-feature-settings:"onum" inherit) or (font-feature-settings:"onum" inherit)){.lnum.tnum{-webkit-font-feature-settings:"lnum","onum" 0,"pnum" 0,"tnum";font-feature-settings:"lnum","onum" 0,"pnum" 0,"tnum"}}.onum.pnum{-ms-font-feature-settings:"lnum" 0,"onum","pnum","tnum" 0}@supports not ((-webkit-font-feature-settings:"onum" inherit) or (font-feature-settings:"onum" inherit)){.onum.pnum{-webkit-font-feature-settings:"lnum" 0,"onum","pnum","tnum" 0;font-feature-settings:"lnum" 0,"onum","pnum","tnum" 0}}.onum.tnum{-ms-font-feature-settings:"lnum" 0,"onum","pnum" 0,"tnum"}@supports not ((-webkit-font-feature-settings:"onum" inherit) or (font-feature-settings:"onum" inherit)){.onum.tnum{-webkit-font-feature-settings:"lnum" 0,"onum","pnum" 0,"tnum";font-feature-settings:"lnum" 0,"onum","pnum" 0,"tnum"}}.onum.zero{-ms-font-feature-settings:"onum","zero"}@supports not ((-webkit-font-feature-settings:"onum" inherit) or (font-feature-settings:"onum" inherit)){.onum.zero{-webkit-font-feature-settings:"onum","zero";font-feature-settings:"onum","zero"}}.onum.tnum.zero{-ms-font-feature-settings:"onum","zero","tnum"}@supports not ((-webkit-font-feature-settings:"onum" inherit) or (font-feature-settings:"onum" inherit)){.onum.tnum.zero{-webkit-font-feature-settings:"onum","zero","tnum";font-feature-settings:"onum","zero","tnum"}}.onum.pnum.zero{-ms-font-feature-settings:"onum","zero","pnum"}@supports not ((-webkit-font-feature-settings:"onum" inherit) or (font-feature-settings:"onum" inherit)){.onum.pnum.zero{-webkit-font-feature-settings:"onum","zero","pnum";font-feature-settings:"onum","zero","pnum"}}.lnum.zero{-ms-font-feature-settings:"lnum","zero"}@supports not ((-webkit-font-feature-settings:"onum" inherit) or (font-feature-settings:"onum" inherit)){.lnum.zero{-webkit-font-feature-settings:"lnum","zero";font-feature-settings:"lnum","zero"}}.lnum.tnum.zero{-ms-font-feature-settings:"lnum","zero","tnum"}@supports not ((-webkit-font-feature-settings:"onum" inherit) or (font-feature-settings:"onum" inherit)){.lnum.tnum.zero{-webkit-font-feature-settings:"lnum","zero","tnum";font-feature-settings:"lnum","zero","tnum"}}.lnum.pnum.zero{-ms-font-feature-settings:"lnum","zero","pnum"}@supports not ((-webkit-font-feature-settings:"onum" inherit) or (font-feature-settings:"onum" inherit)){.lnum.pnum.zero{-webkit-font-feature-settings:"lnum","zero","pnum";font-feature-settings:"lnum","zero","pnum"}}.zero{font-variant-numeric:slashed-zero}@supports not (font-variant-numeric:slashed-zero){.zero{-webkit-font-feature-settings:"zero","zero";font-feature-settings:"zero","zero"}}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.c2sc,.c2sc.smcp,.caps,.smcp{text-transform:lowercase}} -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Utility OpenType 4 | Simple, CSS utility classes for advanced typographic features. 5 | http://utility-opentype.kennethormandy.com 6 | 7 | */ 8 | 9 | /* Ligatures */ 10 | 11 | .liga { 12 | @supports not (font-variant-ligatures: common-ligatures) { 13 | font-feature-settings: "liga"; 14 | } 15 | -ms-font-feature-settings: "liga"; /* IE doesn’t support @supports, but `font-feature-settings` isn’t unprefixed, so we’re cool. */ 16 | font-variant-ligatures: common-ligatures; 17 | } 18 | 19 | .dlig { 20 | @supports not (font-variant-ligatures: discretionary-ligatures) { 21 | font-feature-settings: "dlig"; 22 | } 23 | -ms-font-feature-settings: "dlig"; 24 | font-variant-ligatures: discretionary-ligatures; 25 | } 26 | 27 | /* Caps */ 28 | 29 | .smcp { 30 | text-transform: uppercase; 31 | @supports not (font-variant-caps: small-caps) { 32 | text-transform: inherit; 33 | font-feature-settings: "onum", "smcp", "c2sc" 0; 34 | } 35 | @supports (font-variant-caps: small-caps) { 36 | text-transform: inherit; 37 | font-variant-caps: small-caps; 38 | } 39 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 40 | text-transform: lowercase; 41 | } 42 | -ms-font-feature-settings: "lnum", "smcp", "c2sc" 0; 43 | } 44 | 45 | .c2sc { 46 | @supports (font-variant-caps: all-small-caps) or (font-feature-settings: "c2sc") { 47 | text-transform: lowercase; 48 | } 49 | @supports not (font-variant-caps: all-small-caps) { 50 | font-feature-settings: "onum", "smcp" 0, "c2sc"; 51 | } 52 | text-transform: uppercase; 53 | font-variant-caps: all-small-caps; 54 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 55 | text-transform: lowercase 56 | } 57 | -ms-font-feature-settings: "smcp" 0, "c2sc"; 58 | } 59 | 60 | .c2sc.smcp, 61 | .caps { 62 | text-transform: uppercase; 63 | @supports (font-feature-settings: "smcp", "c2sc") { /* This is not valid CSS, but also doesn’t work in Sass when changed. */ 64 | @supports not (font-variant-caps: all-small-caps) { 65 | text-transform: inherit; 66 | font-feature-settings: "smcp", "c2sc"; 67 | } 68 | } 69 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 70 | text-transform: lowercase; 71 | } 72 | -ms-font-feature-settings: "smcp", "c2sc"; 73 | font-variant-caps: all-small-caps; 74 | } 75 | 76 | .smcp.onum { 77 | @supports not (font-variant-caps: small-caps) { 78 | @supports not (font-variant-numeric: oldstyle-nums) { 79 | font-feature-settings: "onum", "smcp" 1; 80 | } 81 | } 82 | } 83 | 84 | .c2sc.onum, 85 | .caps.onum { 86 | @supports not (font-variant-caps: all-small-caps) { 87 | @supports not (font-variant-numeric: oldstyle-nums) { 88 | text-transform: lowercase; 89 | font-feature-settings: "onum", "smcp" 1; 90 | } 91 | } 92 | } 93 | 94 | .case { 95 | font-feature-settings: "case"; 96 | } 97 | 98 | .titl { 99 | @supports not (font-variant-caps: titling-caps) { 100 | font-feature-settings: "titl"; 101 | } 102 | -ms-font-feature-settings: "titl"; 103 | font-variant-caps: titling-caps; 104 | } 105 | 106 | /* Alternates */ 107 | 108 | .calt { 109 | @supports not (font-variant-ligatures: contextual) { 110 | font-feature-settings: "calt"; 111 | } 112 | -ms-font-feature-settings: "calt"; 113 | font-variant-ligatures: contextual; 114 | } 115 | 116 | .hist { 117 | @supports not (font-variant-alternates: historical-forms) { 118 | font-feature-settings: "hist"; 119 | } 120 | -ms-font-feature-settings: "hist"; 121 | font-variant-alternates: historical-forms; 122 | } 123 | 124 | .swsh, 125 | .swsh-1 { font-feature-settings: "swsh" } 126 | .swsh-2 { font-feature-settings: "swsh" 2 } 127 | .swsh-3 { font-feature-settings: "swsh" 3 } 128 | 129 | .salt, 130 | .salt-1 { font-feature-settings: "salt" } 131 | .salt-2 { font-feature-settings: "salt" 2 } 132 | .salt-3 { font-feature-settings: "salt" 3 } 133 | 134 | .ss01 { font-feature-settings: "ss01" } 135 | .ss02 { font-feature-settings: "ss02" } 136 | .ss03 { font-feature-settings: "ss03" } 137 | .ss04 { font-feature-settings: "ss04" } 138 | .ss05 { font-feature-settings: "ss05" } 139 | .ss06 { font-feature-settings: "ss06" } 140 | .ss07 { font-feature-settings: "ss07" } 141 | .ss08 { font-feature-settings: "ss08" } 142 | .ss09 { font-feature-settings: "ss09" } 143 | .ss10 { font-feature-settings: "ss10" } 144 | .ss11 { font-feature-settings: "ss11" } 145 | .ss12 { font-feature-settings: "ss12" } 146 | .ss13 { font-feature-settings: "ss13" } 147 | .ss14 { font-feature-settings: "ss14" } 148 | .ss15 { font-feature-settings: "ss15" } 149 | .ss16 { font-feature-settings: "ss16" } 150 | .ss17 { font-feature-settings: "ss17" } 151 | .ss18 { font-feature-settings: "ss18" } 152 | .ss19 { font-feature-settings: "ss19" } 153 | .ss20 { font-feature-settings: "ss20" } 154 | 155 | /* Numeric */ 156 | 157 | .frac { 158 | @supports not (font-variant-numeric: diagonal-fractions) { 159 | font-feature-settings: "frac"; 160 | } 161 | -ms-font-feature-settings: "frac"; 162 | font-variant-numeric: diagonal-fractions; 163 | } 164 | 165 | .afrc { 166 | @supports not (font-variant-numeric: stacked-fractions) { 167 | font-feature-settings: "afrc"; 168 | } 169 | -ms-font-feature-settings: "afrc"; 170 | font-variant-numeric: stacked-fractions; 171 | } 172 | 173 | .ordn { 174 | @supports not (font-variant-numeric: ordinal) { 175 | font-feature-settings: "ordn"; 176 | } 177 | -ms-font-feature-settings: "ordn"; 178 | font-variant-numeric: ordinal; 179 | } 180 | 181 | .sups { 182 | @supports not (font-variant-position: sup) { 183 | font-feature-settings: "sups"; 184 | @supports (font-feature-settings: "sups") { 185 | font-size: 1em; 186 | vertical-align: baseline; 187 | } 188 | /* Since Safari lies and says it supports `font-feature-settings`, fix fallback subscript */ 189 | @supports (overflow: -webkit-marquee) and (justify-content: inherit) { 190 | vertical-align: super; 191 | } 192 | } 193 | font-variant-position: super; 194 | } 195 | 196 | .subs, 197 | .sinf { 198 | @supports not (font-variant-position: sub) { 199 | font-feature-settings: "subs"; 200 | @supports (font-feature-settings: "subs") { 201 | font-size: 1em; 202 | vertical-align: baseline; 203 | } 204 | /* Since Safari lies and says it supports `font-feature-settings`, fix fallback subscript */ 205 | @supports (overflow: -webkit-marquee) and (justify-content: inherit) { 206 | vertical-align: sub; 207 | font-size: smaller; 208 | } 209 | } 210 | font-size: inherit; 211 | font-variant-position: sub; 212 | } 213 | 214 | .sinf { 215 | @supports (font-feature-settings: "sinf") { 216 | font-variant-position: normal; 217 | font-feature-settings: "sinf"; 218 | vertical-align: baseline; 219 | } 220 | /* Since Safari lies and says it supports `font-feature-settings`, fix fallback subscript */ 221 | @supports (overflow: -webkit-marquee) and (justify-content: inherit) { 222 | vertical-align: sub; 223 | font-size: smaller; 224 | } 225 | } 226 | 227 | .lnum { 228 | @supports not (font-variant-numeric: lining-nums) { 229 | font-feature-settings: "lnum", "onum" 0; 230 | } 231 | font-variant-numeric: lining-nums; 232 | } 233 | 234 | .onum { 235 | @supports not (font-variant-numeric: oldstyle-nums) { 236 | font-feature-settings: "lnum" 0, "onum"; 237 | } 238 | font-variant-numeric: oldstyle-nums; 239 | } 240 | 241 | .pnum { 242 | @supports not (font-variant-numeric: proportional-nums) { 243 | font-feature-settings: "pnum", "tnum" 0; 244 | } 245 | font-variant-numeric: proportional-nums; 246 | } 247 | 248 | .tnum { 249 | @supports not (font-variant-numeric: tabular-nums) { 250 | font-feature-settings: "pnum" 0, "tnum"; 251 | } 252 | font-variant-numeric: tabular-nums; 253 | } 254 | 255 | 256 | /* High-level property cascade fallback, inherit doesn’t work */ 257 | 258 | .lnum.pnum { 259 | @supports not (font-feature-settings: "onum" inherit) { 260 | font-feature-settings: "lnum", "onum" 0, "pnum", "tnum" 0; 261 | } 262 | -ms-font-feature-settings: "lnum", "onum" 0, "pnum", "tnum" 0; 263 | } 264 | 265 | .lnum.tnum { 266 | @supports not (font-feature-settings: "onum" inherit) { 267 | font-feature-settings: "lnum", "onum" 0, "pnum" 0, "tnum"; 268 | } 269 | -ms-font-feature-settings: "lnum", "onum" 0, "pnum" 0, "tnum"; 270 | } 271 | 272 | .onum.pnum { 273 | @supports not (font-feature-settings: "onum" inherit) { 274 | font-feature-settings: "lnum" 0, "onum", "pnum", "tnum" 0; 275 | } 276 | -ms-font-feature-settings: "lnum" 0, "onum", "pnum", "tnum" 0; 277 | } 278 | 279 | .onum.tnum { 280 | @supports not (font-feature-settings: "onum" inherit) { 281 | font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum"; 282 | } 283 | -ms-font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum"; 284 | } 285 | 286 | .onum.zero { 287 | @supports not (font-feature-settings: "onum" inherit) { 288 | font-feature-settings: "onum", "zero"; 289 | } 290 | -ms-font-feature-settings: "onum", "zero"; 291 | } 292 | 293 | .onum.tnum.zero { 294 | @supports not (font-feature-settings: "onum" inherit) { 295 | font-feature-settings: "onum", "zero", "tnum"; 296 | } 297 | -ms-font-feature-settings: "onum", "zero", "tnum"; 298 | } 299 | 300 | .onum.pnum.zero { 301 | @supports not (font-feature-settings: "onum" inherit) { 302 | font-feature-settings: "onum", "zero", "pnum"; 303 | } 304 | -ms-font-feature-settings: "onum", "zero", "pnum"; 305 | } 306 | 307 | .lnum.zero { 308 | @supports not (font-feature-settings: "onum" inherit) { 309 | font-feature-settings: "lnum", "zero"; 310 | } 311 | -ms-font-feature-settings: "lnum", "zero"; 312 | } 313 | 314 | .lnum.tnum.zero { 315 | @supports not (font-feature-settings: "onum" inherit) { 316 | font-feature-settings: "lnum", "zero", "tnum"; 317 | } 318 | -ms-font-feature-settings: "lnum", "zero", "tnum"; 319 | } 320 | 321 | .lnum.pnum.zero { 322 | @supports not (font-feature-settings: "onum" inherit) { 323 | font-feature-settings: "lnum", "zero", "pnum"; 324 | } 325 | -ms-font-feature-settings: "lnum", "zero", "pnum"; 326 | } 327 | 328 | .zero { 329 | @supports not (font-variant-numeric: slashed-zero) { 330 | font-feature-settings: "zero"; 331 | } 332 | font-variant-numeric: slashed-zero; 333 | } 334 | -------------------------------------------------------------------------------- /css/utility-opentype.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Utility OpenType v0.1.4 4 | Simple, CSS utility classes for advanced typographic features. 5 | http://utility-opentype.kennethormandy.com 6 | 7 | */ 8 | 9 | 10 | .liga { 11 | -ms-font-feature-settings: "liga"; 12 | -webkit-font-variant-ligatures: common-ligatures; 13 | font-variant-ligatures: common-ligatures; 14 | } 15 | 16 | @supports not ((-webkit-font-variant-ligatures: common-ligatures) or (font-variant-ligatures: common-ligatures)) { 17 | 18 | .liga { 19 | -webkit-font-feature-settings: "liga", "liga", "clig"; 20 | font-feature-settings: "liga", "liga", "clig"; 21 | } 22 | } 23 | 24 | .dlig { 25 | -ms-font-feature-settings: "dlig"; 26 | -webkit-font-variant-ligatures: discretionary-ligatures; 27 | font-variant-ligatures: discretionary-ligatures; 28 | } 29 | 30 | @supports not ((-webkit-font-variant-ligatures: discretionary-ligatures) or (font-variant-ligatures: discretionary-ligatures)) { 31 | 32 | .dlig { 33 | -webkit-font-feature-settings: "dlig", "dlig"; 34 | font-feature-settings: "dlig", "dlig"; 35 | } 36 | } 37 | 38 | .smcp { 39 | text-transform: uppercase; 40 | -ms-font-feature-settings: "lnum", "smcp", "c2sc" 0; 41 | } 42 | 43 | @supports not (font-variant-caps: small-caps) { 44 | 45 | .smcp { 46 | text-transform: inherit; 47 | -webkit-font-feature-settings: "onum", "smcp", "c2sc" 0; 48 | font-feature-settings: "onum", "smcp", "c2sc" 0; 49 | } 50 | } 51 | 52 | @supports (font-variant-caps: small-caps) { 53 | 54 | .smcp { 55 | text-transform: inherit; 56 | -webkit-font-feature-settings: "c2sc"; 57 | font-feature-settings: "c2sc"; 58 | font-variant-caps: small-caps; 59 | } 60 | } 61 | 62 | .c2sc { 63 | text-transform: uppercase; 64 | font-variant-caps: all-small-caps; 65 | -ms-font-feature-settings: "smcp" 0, "c2sc"; 66 | } 67 | 68 | @supports (font-variant-caps: all-small-caps) or (font-feature-settings: "c2sc") { 69 | 70 | .c2sc { 71 | text-transform: lowercase; 72 | } 73 | } 74 | 75 | @supports not (font-variant-caps: all-small-caps) { 76 | 77 | .c2sc { 78 | -webkit-font-feature-settings: "onum", "smcp" 0, "c2sc", "smcp", "c2sc"; 79 | font-feature-settings: "onum", "smcp" 0, "c2sc", "smcp", "c2sc"; 80 | } 81 | } 82 | 83 | .c2sc.smcp, 84 | .caps { 85 | text-transform: uppercase; 86 | -ms-font-feature-settings: "smcp", "c2sc"; 87 | font-variant-caps: all-small-caps; 88 | } 89 | 90 | @supports ((-webkit-font-feature-settings: "smcp", "c2sc") or (font-feature-settings: "smcp", "c2sc")) { 91 | 92 | @supports not (font-variant-caps: all-small-caps) { 93 | 94 | .c2sc.smcp, 95 | .caps { 96 | text-transform: inherit; 97 | -webkit-font-feature-settings: "smcp", "c2sc", "smcp", "c2sc"; 98 | font-feature-settings: "smcp", "c2sc", "smcp", "c2sc"; 99 | } 100 | } 101 | } 102 | 103 | @supports not (font-variant-caps: small-caps) { 104 | 105 | @supports not (font-variant-numeric: oldstyle-nums) { 106 | 107 | .smcp.onum { 108 | -webkit-font-feature-settings: "onum", "smcp" 1; 109 | font-feature-settings: "onum", "smcp" 1; 110 | } 111 | } 112 | } 113 | 114 | @supports not (font-variant-caps: all-small-caps) { 115 | 116 | @supports not (font-variant-numeric: oldstyle-nums) { 117 | 118 | .c2sc.onum, 119 | .caps.onum { 120 | text-transform: lowercase; 121 | -webkit-font-feature-settings: "onum", "smcp" 1; 122 | font-feature-settings: "onum", "smcp" 1; 123 | } 124 | } 125 | } 126 | 127 | .case { 128 | -webkit-font-feature-settings: "case"; 129 | font-feature-settings: "case"; 130 | } 131 | 132 | .titl { 133 | -ms-font-feature-settings: "titl"; 134 | font-variant-caps: titling-caps; 135 | } 136 | 137 | @supports not (font-variant-caps: titling-caps) { 138 | 139 | .titl { 140 | -webkit-font-feature-settings: "titl", "titl"; 141 | font-feature-settings: "titl", "titl"; 142 | } 143 | } 144 | 145 | .calt { 146 | -ms-font-feature-settings: "calt"; 147 | -webkit-font-variant-ligatures: contextual; 148 | font-variant-ligatures: contextual; 149 | } 150 | 151 | @supports not ((-webkit-font-variant-ligatures: contextual) or (font-variant-ligatures: contextual)) { 152 | 153 | .calt { 154 | -webkit-font-feature-settings: "calt", "calt"; 155 | font-feature-settings: "calt", "calt"; 156 | } 157 | } 158 | 159 | .hist { 160 | -ms-font-feature-settings: "hist"; 161 | font-variant-alternates: historical-forms; 162 | } 163 | 164 | @supports not (font-variant-alternates: historical-forms) { 165 | 166 | .hist { 167 | -webkit-font-feature-settings: "hist"; 168 | font-feature-settings: "hist"; 169 | } 170 | } 171 | 172 | .swsh, 173 | .swsh-1 { -webkit-font-feature-settings: "swsh"; font-feature-settings: "swsh" } 174 | .swsh-2 { -webkit-font-feature-settings: "swsh" 2; font-feature-settings: "swsh" 2 } 175 | .swsh-3 { -webkit-font-feature-settings: "swsh" 3; font-feature-settings: "swsh" 3 } 176 | 177 | .salt, 178 | .salt-1 { -webkit-font-feature-settings: "salt"; font-feature-settings: "salt" } 179 | .salt-2 { -webkit-font-feature-settings: "salt" 2; font-feature-settings: "salt" 2 } 180 | .salt-3 { -webkit-font-feature-settings: "salt" 3; font-feature-settings: "salt" 3 } 181 | 182 | .ss01 { -webkit-font-feature-settings: "ss01"; font-feature-settings: "ss01" } 183 | .ss02 { -webkit-font-feature-settings: "ss02"; font-feature-settings: "ss02" } 184 | .ss03 { -webkit-font-feature-settings: "ss03"; font-feature-settings: "ss03" } 185 | .ss04 { -webkit-font-feature-settings: "ss04"; font-feature-settings: "ss04" } 186 | .ss05 { -webkit-font-feature-settings: "ss05"; font-feature-settings: "ss05" } 187 | .ss06 { -webkit-font-feature-settings: "ss06"; font-feature-settings: "ss06" } 188 | .ss07 { -webkit-font-feature-settings: "ss07"; font-feature-settings: "ss07" } 189 | .ss08 { -webkit-font-feature-settings: "ss08"; font-feature-settings: "ss08" } 190 | .ss09 { -webkit-font-feature-settings: "ss09"; font-feature-settings: "ss09" } 191 | .ss10 { -webkit-font-feature-settings: "ss10"; font-feature-settings: "ss10" } 192 | .ss11 { -webkit-font-feature-settings: "ss11"; font-feature-settings: "ss11" } 193 | .ss12 { -webkit-font-feature-settings: "ss12"; font-feature-settings: "ss12" } 194 | .ss13 { -webkit-font-feature-settings: "ss13"; font-feature-settings: "ss13" } 195 | .ss14 { -webkit-font-feature-settings: "ss14"; font-feature-settings: "ss14" } 196 | .ss15 { -webkit-font-feature-settings: "ss15"; font-feature-settings: "ss15" } 197 | .ss16 { -webkit-font-feature-settings: "ss16"; font-feature-settings: "ss16" } 198 | .ss17 { -webkit-font-feature-settings: "ss17"; font-feature-settings: "ss17" } 199 | .ss18 { -webkit-font-feature-settings: "ss18"; font-feature-settings: "ss18" } 200 | .ss19 { -webkit-font-feature-settings: "ss19"; font-feature-settings: "ss19" } 201 | .ss20 { -webkit-font-feature-settings: "ss20"; font-feature-settings: "ss20" } 202 | 203 | .frac { 204 | -ms-font-feature-settings: "frac"; 205 | font-variant-numeric: diagonal-fractions; 206 | } 207 | 208 | @supports not (font-variant-numeric: diagonal-fractions) { 209 | 210 | .frac { 211 | -webkit-font-feature-settings: "frac", "frac"; 212 | font-feature-settings: "frac", "frac"; 213 | } 214 | } 215 | 216 | .afrc { 217 | -ms-font-feature-settings: "afrc"; 218 | font-variant-numeric: stacked-fractions; 219 | } 220 | 221 | @supports not (font-variant-numeric: stacked-fractions) { 222 | 223 | .afrc { 224 | -webkit-font-feature-settings: "afrc", "afrc"; 225 | font-feature-settings: "afrc", "afrc"; 226 | } 227 | } 228 | 229 | .ordn { 230 | -ms-font-feature-settings: "ordn"; 231 | font-variant-numeric: ordinal; 232 | } 233 | 234 | @supports not (font-variant-numeric: ordinal) { 235 | 236 | .ordn { 237 | -webkit-font-feature-settings: "ordn", "ordn"; 238 | font-feature-settings: "ordn", "ordn"; 239 | } 240 | } 241 | 242 | .sups { 243 | font-variant-position: super; 244 | } 245 | 246 | @supports not (font-variant-position: sup) { 247 | 248 | .sups { 249 | -webkit-font-feature-settings: "sups", "sups"; 250 | font-feature-settings: "sups", "sups"; 251 | } 252 | 253 | @supports ((-webkit-font-feature-settings: "sups") or (font-feature-settings: "sups")) { 254 | 255 | .sups { 256 | font-size: 1em; 257 | vertical-align: baseline; 258 | } 259 | } 260 | 261 | @supports (overflow: -webkit-marquee) and (justify-content: inherit) { 262 | 263 | .sups { 264 | vertical-align: super; 265 | } 266 | } 267 | } 268 | 269 | .subs, 270 | .sinf { 271 | font-size: inherit; 272 | font-variant-position: sub; 273 | } 274 | 275 | @supports not (font-variant-position: sub) { 276 | 277 | .subs, 278 | .sinf { 279 | -webkit-font-feature-settings: "subs", "subs"; 280 | font-feature-settings: "subs", "subs"; 281 | } 282 | 283 | @supports ((-webkit-font-feature-settings: "subs") or (font-feature-settings: "subs")) { 284 | 285 | .subs, 286 | .sinf { 287 | font-size: 1em; 288 | vertical-align: baseline; 289 | } 290 | } 291 | 292 | @supports (overflow: -webkit-marquee) and (justify-content: inherit) { 293 | 294 | .subs, 295 | .sinf { 296 | vertical-align: sub; 297 | font-size: smaller; 298 | } 299 | } 300 | } 301 | 302 | @supports ((-webkit-font-feature-settings: "sinf") or (font-feature-settings: "sinf")) { 303 | 304 | .sinf { 305 | font-variant-position: normal; 306 | -webkit-font-feature-settings: "sinf", "subs" off, "sups" off; 307 | font-feature-settings: "sinf", "subs" off, "sups" off; 308 | vertical-align: baseline; 309 | } 310 | } 311 | 312 | @supports (overflow: -webkit-marquee) and (justify-content: inherit) { 313 | 314 | .sinf { 315 | vertical-align: sub; 316 | font-size: smaller; 317 | } 318 | } 319 | 320 | .lnum { 321 | font-variant-numeric: lining-nums; 322 | } 323 | 324 | @supports not (font-variant-numeric: lining-nums) { 325 | 326 | .lnum { 327 | -webkit-font-feature-settings: "lnum", "onum" 0, "lnum"; 328 | font-feature-settings: "lnum", "onum" 0, "lnum"; 329 | } 330 | } 331 | 332 | .onum { 333 | font-variant-numeric: oldstyle-nums; 334 | } 335 | 336 | @supports not (font-variant-numeric: oldstyle-nums) { 337 | 338 | .onum { 339 | -webkit-font-feature-settings: "lnum" 0, "onum", "onum"; 340 | font-feature-settings: "lnum" 0, "onum", "onum"; 341 | } 342 | } 343 | 344 | .pnum { 345 | font-variant-numeric: proportional-nums; 346 | } 347 | 348 | @supports not (font-variant-numeric: proportional-nums) { 349 | 350 | .pnum { 351 | -webkit-font-feature-settings: "pnum", "tnum" 0, "pnum"; 352 | font-feature-settings: "pnum", "tnum" 0, "pnum"; 353 | } 354 | } 355 | 356 | .tnum { 357 | font-variant-numeric: tabular-nums; 358 | } 359 | 360 | @supports not (font-variant-numeric: tabular-nums) { 361 | 362 | .tnum { 363 | -webkit-font-feature-settings: "pnum" 0, "tnum", "tnum"; 364 | font-feature-settings: "pnum" 0, "tnum", "tnum"; 365 | } 366 | } 367 | 368 | .lnum.pnum { 369 | -ms-font-feature-settings: "lnum", "onum" 0, "pnum", "tnum" 0; 370 | } 371 | 372 | @supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) { 373 | 374 | .lnum.pnum { 375 | -webkit-font-feature-settings: "lnum", "onum" 0, "pnum", "tnum" 0; 376 | font-feature-settings: "lnum", "onum" 0, "pnum", "tnum" 0; 377 | } 378 | } 379 | 380 | .lnum.tnum { 381 | -ms-font-feature-settings: "lnum", "onum" 0, "pnum" 0, "tnum"; 382 | } 383 | 384 | @supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) { 385 | 386 | .lnum.tnum { 387 | -webkit-font-feature-settings: "lnum", "onum" 0, "pnum" 0, "tnum"; 388 | font-feature-settings: "lnum", "onum" 0, "pnum" 0, "tnum"; 389 | } 390 | } 391 | 392 | .onum.pnum { 393 | -ms-font-feature-settings: "lnum" 0, "onum", "pnum", "tnum" 0; 394 | } 395 | 396 | @supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) { 397 | 398 | .onum.pnum { 399 | -webkit-font-feature-settings: "lnum" 0, "onum", "pnum", "tnum" 0; 400 | font-feature-settings: "lnum" 0, "onum", "pnum", "tnum" 0; 401 | } 402 | } 403 | 404 | .onum.tnum { 405 | -ms-font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum"; 406 | } 407 | 408 | @supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) { 409 | 410 | .onum.tnum { 411 | -webkit-font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum"; 412 | font-feature-settings: "lnum" 0, "onum", "pnum" 0, "tnum"; 413 | } 414 | } 415 | 416 | .onum.zero { 417 | -ms-font-feature-settings: "onum", "zero"; 418 | } 419 | 420 | @supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) { 421 | 422 | .onum.zero { 423 | -webkit-font-feature-settings: "onum", "zero"; 424 | font-feature-settings: "onum", "zero"; 425 | } 426 | } 427 | 428 | .onum.tnum.zero { 429 | -ms-font-feature-settings: "onum", "zero", "tnum"; 430 | } 431 | 432 | @supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) { 433 | 434 | .onum.tnum.zero { 435 | -webkit-font-feature-settings: "onum", "zero", "tnum"; 436 | font-feature-settings: "onum", "zero", "tnum"; 437 | } 438 | } 439 | 440 | .onum.pnum.zero { 441 | -ms-font-feature-settings: "onum", "zero", "pnum"; 442 | } 443 | 444 | @supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) { 445 | 446 | .onum.pnum.zero { 447 | -webkit-font-feature-settings: "onum", "zero", "pnum"; 448 | font-feature-settings: "onum", "zero", "pnum"; 449 | } 450 | } 451 | 452 | .lnum.zero { 453 | -ms-font-feature-settings: "lnum", "zero"; 454 | } 455 | 456 | @supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) { 457 | 458 | .lnum.zero { 459 | -webkit-font-feature-settings: "lnum", "zero"; 460 | font-feature-settings: "lnum", "zero"; 461 | } 462 | } 463 | 464 | .lnum.tnum.zero { 465 | -ms-font-feature-settings: "lnum", "zero", "tnum"; 466 | } 467 | 468 | @supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) { 469 | 470 | .lnum.tnum.zero { 471 | -webkit-font-feature-settings: "lnum", "zero", "tnum"; 472 | font-feature-settings: "lnum", "zero", "tnum"; 473 | } 474 | } 475 | 476 | .lnum.pnum.zero { 477 | -ms-font-feature-settings: "lnum", "zero", "pnum"; 478 | } 479 | 480 | @supports not ((-webkit-font-feature-settings: "onum" inherit) or (font-feature-settings: "onum" inherit)) { 481 | 482 | .lnum.pnum.zero { 483 | -webkit-font-feature-settings: "lnum", "zero", "pnum"; 484 | font-feature-settings: "lnum", "zero", "pnum"; 485 | } 486 | } 487 | 488 | .zero { 489 | font-variant-numeric: slashed-zero; 490 | } 491 | 492 | @supports not (font-variant-numeric: slashed-zero) { 493 | 494 | .zero { 495 | -webkit-font-feature-settings: "zero", "zero"; 496 | font-feature-settings: "zero", "zero"; 497 | } 498 | } 499 | 500 | @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 501 | 502 | .smcp { 503 | text-transform: lowercase; 504 | } 505 | 506 | .c2sc { 507 | text-transform: lowercase; 508 | } 509 | 510 | .c2sc.smcp, 511 | .caps { 512 | text-transform: lowercase; 513 | } 514 | } 515 | --------------------------------------------------------------------------------