PostCSS 系统 UI 字体家族

npm install @csstools/postcss-system-ui-font-family --save-dev

PostCSS 系统 UI 字体家族 让你使用 system-ui 关键词 CSS 字体 4 规格。 。 。 .

.foo {
    font: italic bold 12px/30px system-ui;
    font-family: system-ui;
    --font-family: system-ui;
}

/* becomes */

.foo {
    font: italic bold 12px/30px system-ui;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    --font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

使用量

添加 PostCSS 系统 UI 字体家族 对您的项目:

npm install postcss @csstools/postcss-system-ui-font-family --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssSystemUIFontFamily = require('@csstools/postcss-system-ui-font-family');

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

选项

保护

这个 preserve 选项决定原始标记是否 被保存下来。 默认保存.

postcssSystemUIFontFamily({ preserve: false })

.foo {
    font: italic bold 12px/30px system-ui;
    font-family: system-ui;
    --font-family: system-ui;
}

/* becomes */

.foo {
    font: italic bold 12px/30px system-ui;
    font-family: -apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    --font-family: -apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}