npm install @csstools/postcss-font-width-property --save-devPostCSS Font Width Property lets you use the font-width property and descriptor follow the CSS Fonts Specification.
@font-face {
src: url("foo.ttf");
font-family: "foo";
font-style: normal;
font-width: 1% 1000%;
}
.foo {
font-width: 50%;
}
/* becomes */
@font-face {
src: url("foo.ttf");
font-family: "foo";
font-style: normal;
font-stretch: 1% 1000%;
}
.foo {
font-stretch: 50%;
}Add PostCSS Font Width Property to your project:
npm install postcss @csstools/postcss-font-width-property --save-devUse it as a PostCSS plugin:
const postcss = require('postcss');
const postcssFontWidthProperty = require('@csstools/postcss-font-width-property');
postcss([
postcssFontWidthProperty(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);PostCSS Font Width Property runs in all Node environments, with special instructions for:
The preserve option determines whether the original notation
is preserved. By default, it is not preserved.
postcssFontWidthProperty({ preserve: true })@font-face {
src: url("foo.ttf");
font-family: "foo";
font-style: normal;
font-width: 1% 1000%;
}
.foo {
font-width: 50%;
}
/* becomes */
@font-face {
src: url("foo.ttf");
font-family: "foo";
font-style: normal;
font-stretch: 1% 1000%;
font-width: 1% 1000%;
}
.foo {
font-stretch: 50%;
font-width: 50%;
}