PostCSS 字体宽度属性

npm install @csstools/postcss-font-width-property --save-dev

PostCSS 字体宽度属性 让你使用 font-width 属性和描述符 CSS 字体规格。 。 。 .

@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%;
}

使用量

添加 PostCSS 字体宽度属性 对您的项目:

npm install postcss @csstools/postcss-font-width-property --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssFontWidthProperty = require('@csstools/postcss-font-width-property');

postcss([
    postcssFontWidthProperty(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

选项

保护

这个 preserve 选项决定原始标记是否 被保存下来。 默认情况下,它没有被保存.

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%;
}