Web references Chinese character fonts

In a recent front-end development, because of the design, to cite some special fonts (otf format), but later found that these font files are very large, about average for every 8mb, seriously affecting the efficiency of the web page. After some searching, I found the front-end font compression tool (only supports utf-8 format) font-spider.

font-spider Introduction

You can view specific description, HTTP: //font-spider.org/index ....

installation

First installed NodeJS, then execute: npm install font-spider -g

use

/*声明 WebFont*/
@font-face {
  font-family: 'pinghei';
  src: url('../font/pinghei.eot');
  src:
    url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),
    url('../font/pinghei.woff') format('woff'),
    url('../font/pinghei.ttf') format('truetype'),
    url('../font/pinghei.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*使用选择器指定字体*/
.home h1, .demo > .test {
    font-family: 'pinghei';
}

src defined @ font-face in the .ttf file must exist, the format is automatically generated by the tool
so, there must be ttf format fonts, if other types, can be converted online https://www.fontke.com/ tool / c ...

Create fonts

Run command font-spider ./demo/*.html

Then you can find a good font compression is very small, only a few k