postcss-font-family-fangsong

简体中文

postcss-font-family-fangsong lets you use fangsong in CSS, following the CSS Fonts Module Level 4 specification.

body {
  font: 16pt/28pt fangsong;
}

/* becomes */

body {
  font: 16pt/28pt fangsong, STFangsong, FangSong, FangSong_GB2312;
}

Usage

Add postcss-font-family-fangsong to your build tool:

npm install postcss-font-family-fangsong --save-dev

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use postcss-font-family-fangsong as a plugin:

import postcss from "gulp-postcss";
import postcssFontFangsong from "postcss-font-family-fangsong";

postcss([postcssFontFangsong(/* options */)]).process(YOUR_CSS);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use postcss-font-family-fangsong in your Gulpfile:

import postcss from "gulp-postcss";
import postcssFontFangsong from "postcss-font-family-fangsong";

gulp.task("css", () =>
  gulp
    .src("./src/*.css")
    .pipe(postcss([postcssFontFangsong(/* options */)]))
    .pipe(gulp.dest("."))
);

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use postcss-font-family-fangsong in your Gruntfile:

import postcssFontFangsong from "postcss-font-family-fangsong";

grunt.loadNpmTasks("grunt-postcss");

grunt.initConfig({
  postcss: {
    options: {
      use: [postcssFontFangsong(/* options */)],
    },
    dist: {
      src: "*.css",
    },
  },
});

Node

Use postcss-font-family-fangsong to process your CSS:

import postcssFontFangsong from "postcss-font-family-fangsong";

postcssFontFangsong.process(YOUR_CSS);

Options

family

The family: string | string[] option defines the fallback families used to polyfill fangsong. It accepts an array or a comma-separated string.

import postcssFontFangsong from "postcss-font-family-fangsong";

postcssFontFangsong({
  family: "fangsong, FangSong, FZFangSong-Z02, FandolFang",
});

preserve

The preserve: boolean option controls whether fangsong should be preserved in the transformed CSS output. Its default value is true

postcssFontFangsong({
  preserve: true, // preserve `fangsong` in the transpiled output
});

When both family and preserve are specified, preserve is a no-op.