Font-spider a Magic Web page Chinese font tool, is so wayward

Article Summary:

1>> Font-spider Font Magic

Due to the needs of the promotion of activities, the page needs to use some pretty good-looking fonts, example: Handan-han Peng Mao body. TTF, founder Meow. TTF

I saw some good-looking test activity page of the demo, the page (question and answer) are directly cut into the small picture, I saw is also stunned, no wonder so good-looking. So the thought of doing so, the result found a very serious problem.

I calculated, we have about 60 questions, and the answer to each question has 3, 4, 5, forget one under, if it is cut into small pictures to maintain, at least also have: 60*4=240 Picture it. So the design and back-end development are not dry, this is a nightmare ah.

the words are omitted here ..., etc...... The problem still has to be solved, so after negotiation or prepare to adopt font library to do, so embarked on the road of the tall

For the first contact with me, found a lot of English font is quite many, Chinese fonts are very few, to the Internet for the majority of days, have not found a good font. Accidentally found a Chinese spider called Font-spider, so curious to use the next, found it is really magical.

Font-spirder official website : http://font-spider.org/

Font-spirder: making it possible for Web pages to be freely introduced into Chinese fonts

Step into 3 steps, super simple:

Step One: npm Install the font spider

1 npm Install Font-spider-g

Step Two: use Webfont in CSS

1 /*Statement Webfont*/2@font-Face {3Font-family:'Pinghei';4Src:url ('.. /font/pinghei.eot');5 src:6Url'.. /font/pinghei.eot? #font-spider') Format ('Embedded-opentype'),7Url'.. /font/pinghei.woff') Format ('Woff'),8Url'.. /font/pinghei.ttf') Format ('TrueType'),9Url'.. /font/pinghei.svg') Format ('svg');Tenfont-Weight:normal; Onefont-Style:normal; A } -  - /*using selectors to specify fonts*/ the. Home H1,. Demo >. Test { -Font-family:'Pinghei'; -}

Attention:

1>>. The . ttf file defined by the SRC @font-face must exist, and the remaining formats will be automatically generated by the tool

2>>. in the development phase, use the relative path of CSS and Webfont

Step Three: run the font-spider command

1 font-spider. /* . html

" Reminder ": My idea is to first count the project in the total use of those words, classification of the generation of the different fonts, currently font-spider does not support dynamic generation:

The effect is as follows:

Font-spider generated by: Founder Meow. TTF

Font-spider produced by: Handan-han Peng. TTF

Font-spider a Magic Web page Chinese font tool, is so wayward