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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.