4.0.0 • Published 3 years ago
postcss-system-monospace v4.0.0
PostCSS System Monospace
Monospace fonts from your operating system
Most systems have their own monospace font which font-family: monospace
does not observe. This PostCSS plugin gives the ability to use the client system's monospace font via CSS.
/* input */
.example {
font-family: system-monospace;
}
/* output */
.example {
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
Check out the visual test.
Install
# npm
npm install --save-dev postcss postcss-system-monospace
# or yarn
yarn add --dev postcss postcss-system-monospace
Usage
Add it to your PostCSS work-flow, whatever way you choose to.
// Using a postcss.config.js
const systemMonospace = require('postcss-system-monospace');
module.exports = {
plugins: [
systemMonospace
]
};
Then use the font-family name system-monospace
where ever needed.
.code {
font-family: system-monospace;
}
Fonts
name | system |
---|---|
SFMono-Regular | macOS |
Menlo | macOS & iOS |
Monaco | macOS |
Consolas | Windows |
Liberation Mono | Linux |
Courier New | fallback |
monospace | fallback |
Credits
- Nick Galbreath for his articles on operating system monospace fonts and their use with CSS, CSS System Font Stack Monospace v1 & CSS System Font Stack Monospace v2