Skip to content
master
Switch branches/tags
Code
This branch is up to date with master.
Contribute

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

postcss-webfont

npm GitHub license

postcss-webfont is PostCSS plugin for generating web fonts from stylesheets.

Installation

npm

npm install postcss-webfont --save-dev

yarn

yarn add postcss-webfont --dev

Usage

const postcss = require('postcss');
const webfont = require('postcss-webfont');

const options = {
  outputPath: './dist/fonts/'
};

postcss([webfont(options)])
  .process(css)
  .then(function(result) {
    fs.writeFileSync('./dist/style.css', result.css);
  });

Options

basePath

Your base path that will be used for svg files with absolute CSS urls.

Type: String

Default: ./

outputPath

Relative path to the directory that will keep your output font file.

Type: String

Default: ./

stylesheetPath

Relative path to the base directory that will keep your stylesheet file.

Type: String

Default: ./

publishPath

The url to the output directory resolved relative to the HTML page.

Type: String

Default: ``

cachePath

The cache file path of generated fonts.

Type: String

Default: .fontcache.json

formats

The output formats of font-face src property.

Type: Array<String>

Default: ['ttf', 'eot', 'woff']

startUnicode

Starting codepoint used for the generated glyphs.

Type: Integer

Default: 0xEA01

prependUnicode

Prefix files with their automatically allocated unicode code point.

Type: Boolean

Default: false

verticalAlign

The vertical-align property value.

Type: String

Default: middle

classNamePrefix

The generating class name prefix.

Type: String

Default: iconfont

classNamePrefixBefore

The generating class name prefix for before pseudo element.

Type: String

Default: before

classNamePrefixAfter

The generating class name prefix for after pseudo element.

Type: String

Default: after

cachebuster

The cachebuster type.
To disable is specified null or undefined.

Cachebuster types:

  • hash : Generating font hash.
  • fixed : Fixed cachebuster. The fixed value is specified cachebusterFixed option.

Type: String

Default: hash

cachebusterFixed

The fixed cachebuster value.

Type: String

Default: ``

svgicons2svgfont options

The options of svgicons2svgfont are available:

  • options.fontWeight
  • options.fontStyle
  • options.fixedWidth
  • options.centerHorizontally
  • options.normalize
  • options.fontHeight
  • options.round
  • options.descent

Example

├─┬ css/
│ └─ style.css
├── fonts/
└─┬ svg/
  ├─ arrow-up-left.svg
  └─ arrow-up-right.svg

style.css

// before
@font-face {
  font-family: 'font-awesome';
  src: url('./fonts/*.svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
// after
@font-face {
  font-family: 'font-awesome';
  src:  url('./fonts/font-awesome.eot');
  src:  url('./fonts/font-awesome.eot#iefix') format('embedded-opentype'),
    url('./fonts/font-awesome.ttf') format('truetype'),
    url('./fonts/font-awesome.woff') format('woff'),
    url('./fonts/font-awesome.svg?#font-awesome') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^='iconfont-font-awesome-']::before, [class*=' iconfont-font-awesome-']::before,
[class^='iconfont-before-font-awesome-']::before, [class*=' iconfont-before-font-awesome-']::before,
[class^='iconfont-after-font-awesome-']::after, [class*=' iconfont-after-font-awesome-']::after {
  font-family: 'font-awesome', sans-serif;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.iconfont-font-awesome-arrow-up-left::before {
  content: '\EA01';
}
.iconfont-before-font-awesome-arrow-up-left::before {
  content: '\EA01';
}
.iconfont-after-font-awesome-arrow-up-right::after {
  content: '\EA02';
}

Changelog

License

About

PostCSS plugin to generate iconfonts from stylesheets.

Resources

License

Stars

Watchers

Forks

Packages

No packages published