jonathantnealPostCSS Font Weights 
PostCSS Font Weights lets you do this in CSS.
h1, h2, h3 {
font-weight: light;
}
pre {
font: light 100% monospace;
}
/* becomes */
h1, h2, h3 {
font-weight: 300;
}
pre {
font: 300 100% monospace;
}
Common font weights are found in the Font Weight Numeric Values section of the CSS Fonts Specification.
| Common Weight | Numeric Value |
|---|---|
| thin | 100 |
| extralight | 200 |
| ultralight | 200 |
| light | 300 |
| book | 400 |
| normal | 400 |
| regular | 400 |
| roman | 400 |
| medium | 500 |
| semibold | 600 |
| demibold | 600 |
| bold | 700 |
| extrabold | 800 |
| ultrabold | 800 |
| black | 900 |
| heavy | 900 |
These common font weights are converted to their numeric counterpart.
Usage
Add PostCSS Font Weights to your project:
npm install postcss-font-weights --save-dev
Use PostCSS Font Weights to process your CSS:
const postcssFontWeights = require('postcss-font-weights');
postcssFontWeights.process(YOUR_CSS /*, processOptions, pluginOptions */);
Or use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssFontWeights = require('postcss-font-weights');
postcss([
postcssFontWeights(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS Font Weights runs in all Node environments, with special instructions for:
| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt |
|---|---|---|---|---|---|
Options
prefix
The prefix option determines the prefix applied to properties being processed
(e.g. x for -x-font-weight). Wrapping dashes (-) are automatically
applied.
custom
The custom option determines additional font weight keywords and numeric
pairs (e.g. custom: { lite: 300 } for font-weight: lite to become
font-weight: 300).