Make it possible to use special Chinese fonts in Web pages

Source: Internet
Author: User

Reprint http://www.cnblogs.com/Kummy/p/4442142.html
?? If you want to display a special Chinese font in a Web page when you don't know this way before, Need to import the entire. TTF font file, and the file up to several megabytes, is not advisable at all, by chance to see the above linked articles, new ideas new method, the Web page needs to use special fonts in Chinese text, packaging compression.

1. Installing Font-spider
npm install font-spider -g
2. Using Webfont in CSS
@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;} // 指定字体并使用.pinghei {    font-family: ‘pinghei‘;}// ../font 都是相对路径,看文件相对位置// 其中.ttf文件是必须要有的,根据设计稿的字体在网上下载对应的.ttf文件,其他都是生成的
3. Run the Font-spider command
font-spider *.html
4. Warm Tips

When you run the Font-spider command, the related files are automatically generated, and the fonts include only text that includes only the fonts that appear and refer to the page, and if additional text is added later, you need to rerun the command

Make it possible to use special Chinese fonts in Web pages

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.