PostCSS plugin to inject capsize font metrics
npm install postcss-capsizePostCSS plugin to inject Capsize font metrics
> PostCSS plugin to inject Capsize font metrics
First install postcss-capsize:
``bash`
yarn add postcss-capsize --devor npm
npm install postcss-capsize --save-dev
Second, add postcss-capsize as a PostCSS plugin to your postcss.config.js,
or in your project configuration.
`diff`
module.exports = {
plugins: [
+ ['postcss-capsize', {
+ metrics: {
+ 'Test Mono': {
+ capHeight: 100,
+ ascent: 800,
+ descent: -200,
+ lineGap: 0,
+ unitsPerEm: 1000,
+ }
+ // You can declare as many fonts as needed
+ }
+ }],
require('autoprefixer')
]
}
Note: there are many font metrics you can install from @capsizecss/metrics - or generate from a font file via @capsizecss/unpack.
css
.test {
line-gap: 10px;
/ both properties below must be declared alongside line-gap /
/ The first matching font-family from your plugin config will be used /
font-family: 'Gaudy Mono', 'Test Mono', sans-serif;
font-size: 24px;
}
`$3
`css
.test {
/ font-metrics: [font-size] [font-family] [line-gap] /
/ [font-family] must match the entry in your plugin config /
font-metrics: 24px Test Mono 10px;
}
`$3
`css
.test {
line-height: 12.4px;
font-size: 24px;
font-family: 'Gaudy Mono', 'Test Mono', sans-serif;
/ Or, with combined syntax /
font-family: Test Mono;
}
.test::before {
content: '';
margin-bottom: -0.4583em;
display: table;
}
.test::after {
content: '';
margin-top: 0.0417em;
display: table;
}
``This has been developed to suit my needs but additional use cases and contributions are very welcome.
MIT License - Copyright © Daniel Roe