postcss-font-weights

2018-10-23 admin

postcss-font-weights是什么

什么是postcss-font-weights,Use common font weights in CSS

postcss-font-weights使用教程帮助文档

PostCSS Font Weights PostCSS

NPM Version Build Status Support Chat

PostCSS Font Weights lets you do this in CSS.

h1, h2, h3 {
  font-weight: light;
}
pre {
   font: light 100% monospace;
}
/* becomes */
h1, h2, h3 {
  font-weight: 300;
}
pre {
   font: 300 100% monospace;
}

Common font weights are found in the Font Weight Numeric Values section of the CSS Fonts Specification.

Common Weight Numeric Value
thin 100
extralight 200
ultralight 200
light 300
book 400
normal 400
regular 400
roman 400
medium 500
semibold 600
demibold 600
bold 700
extrabold 800
ultrabold 800
black 900
heavy 900

These common font weights are converted to their numeric counterpart.

Usage

Add PostCSS Font Weights to your project:

npm install postcss-font-weights --save-dev

Use PostCSS Font Weights to process your CSS:

const postcssFontWeights = require('postcss-font-weights');
postcssFontWeights.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssFontWeights = require('postcss-font-weights');
postcss([
  postcssFontWeights(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Font Weights runs in all Node environments, with special instructions for:

Node PostCSS CLI Webpack RSS iis7站长之家 Gulp Grunt

Options

prefix

The prefix option determines the prefix applied to properties being processed (e.g. x for -x-font-weight). Wrapping dashes (-) are automatically applied.

custom

The custom option determines additional font weight keywords and numeric pairs (e.g. custom: { lite: 300 } for font-weight: lite to become font-weight: 300).

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-43430.html

文章标题:postcss-font-weights

回到顶部