Let your website use cool Chinese fonts

Click "Read the original text" to get a better reading experience.

With the rapid development of the current web technology, the content of the web page interface is becoming more and more abundant, dazzling people, including various custom fonts in the web page.

For example, the homepage font of a personal blog:

@font-face> introduced by CSS3

The EOT font is the preferred format of the IE browser, and other browsers do not support it; other browsers prefer the common TTF, SVG, < code>WOFF.

The basic syntax is as follows:

@font-facefont-family:>src:>url(' <Downloaded fonts, the path saved in the computer>');font-variant:>font-stretch:>font -style:>font-weight:>

For example:

@font-facefont-family:'Lora';src:> url('../fonts/STKaiti.eot');>/*IE9CompatModes*/src:>url ('../fonts/STKaiti.eot?#iefix')>format('embedded-opentype'),>/*IE6-IE8* />url('../fonts/STKaiti.woff2')>format('woff2'),> /*SuperModernBrowsers*/>url('../fonts/STKaiti.woff')>format('woff'),>/*ModernBrowsers*/>url('../fonts/STKaiti.ttf')>format('truetype '),>/*Safari,Android,iOS*/>url('../fonts/STKaiti.svg#STKaiti')>format ('svg');>/*LegacyiOS*/font-style:>font-weight: >}bodyfont-family:>...}

Test results: Chrome, Firefox, IE7-IE11 can all be implemented

01

Although the custom Chinese fonts are cool, there is a disadvantage, that is, the Chinese fonts are too large, which consumes resources. The specific reason is actually very simple: English has only 26 letters, and the 128 character sets on an ASCII code table can almost Indicates any English sentence. Due to the small character set, the font file can also be made very small; the Chinese font is completely different, the number of Chinese characters (including symbols) encoded by GB2313 alone reaches 7445, and the number of characters is ASCII< /code>

The solution is actually very simple. Only keep the text that appears on the page in the font library, delete a large number of other unused text, and generate a small font file containing only specific characters, which can greatly reduce the font file and improve access speed. Now that I have an idea, are there any ready-made tools?

There really are. After some searching, I found two tools: one is "word spider[1]" developed by the Chinese, the English name is font-spider, which relies on the Node.js environment, is a command-line tool. The main idea is to collect fonts used in online web pages, separate them from font files, and complete substantial compression. The other is the revised font-soider by Tencent's boss, called font-spider-plus[2]. They work as follows:

I chose to use font-spider-plus, after all, it has been revised, with fewer bugs and more functions, and it also supports online dynamically rendered pages. The only shortcoming is that the official documentation is too vague, and many people don't know how to use it at all. Below I will give a detailed example to teach you how to use font-spider-plus step by step.

According to the official document, if you want to use font-spider-plus, you must first write HTML files through @font-face

in the CSS file span>

First, we create a new folder to put the html file:

$mkdirindex

Then create a index.html

<div>class="test" in the index directory >Michelangelo </div><style>< /span>@font-facefont-family:'font';src:> url('../fonts/<font>.eot');src:>url('.. /fonts/<font>.eot?#font-spider')>format('embedded-opentype'),>url('../fonts/<font>.woff2')>format('woff2'),>url('. ./fonts/<font>.woff')>format('woff'),>url('../fonts /<font>.ttf')>format('truetype'),>url('../fonts/< font>.svg')>format('svg');font-weight:>font-style:>>>.testfont-family:'font';></style< /span>>

• Please put<divclass="test"> </div> to replace the text in your own website. You can choose to select all the content of your blog and paste it here.
• Download the font you want to use tofonts folder, and replace <font> in index.html with the prefix of the font you downloaded.

Special note: src>

The following is the English name corresponding to the Chinese font:

Xinming: PMingLiU: MingLiU: DFKai-SB黑体: SimHei: SimSun: NSimSun: FangSong: KaiTi_GB2312: FangSong_GB2312: KaiTi_GB2312: KaiTi_GB2312Microsoft Zhenghei: Microsoft>微软雅黑体: MicrosoftYaHei Some additional fonts that will come out when installing Office: Lishu: LiSu Youyuan: YouYuan Chinese Thin Black: STXihei Font: FZShuTi Founder Yao Ti: FZYaoti Chinese Colorful Clouds: STCaiyun Chinese Amber: STHupo Chinese Official Script: STLiti Chinese Xingkai: STXingkai Chinese Xinwei: STXinwei Fonts in Apple Computer: Chinese Thin Black: STHeiti>Chinese Blackbody: STHeitiChinese Kaiti: STKaitiChinese Song Style: STSong Chinese Imitation Song: STFangsong Lihei> Lisong Pro: LiSongProLight Standard KaiTi: BiauKai Apple Lizhong Hei: Apple> Apple Lisung: AppleLiSungLight

Compressed local WebFont< /span>

Then execute the following command to compress the local WebFont:

$fsp>local>

Oh yes, you need to install the fsp command through npm first:

$npmifont-spider-plus-g

After the compression is complete, the compressed font file will be generated in the fonts directory:

$llfonts/total>-rw-rw-rw-1cnsgygstaff7.7K112101:08STKaiti.eot-rw-rw-rw->-rw-rw-rw-1cnsgygstaff7.6K112101:08STKaiti.ttf-rw- rw-rw->-rw-rw-rw-1cnsgygstaff3.9K112101:08STKaiti.woff2

The font files before compression will be moved to .font-spider>

$llfonts/.font-spidertotal>-rw-rw in the fonts directory -rw-1cnsgygstaff12M112101:08STKaiti.ttf

Write CSS

Now that the font is compressed, how can I apply it to my website? It is also very simple, first write a CSS through @font-faxe

>/*fonts-zh.css*/@font-face span>font-family:'font';src:>url('../fonts/ <font>.eot');src:>url('../fonts/<font>.eot?#font-spider' )>format('embedded-opentype'),>url('../fonts/<font>.woff2'< /span>)>format('woff2'),>url('../fonts/<font>.woff' )>format('woff'),>url('../fonts/<font>.ttf')>format ('truetype'),>url('../fonts/<font>.svg')>format('svg');font-weight:>font-style:>

This is not enough, you also need to copy the compressed font files to your website, and these font files can be found through relative paths in CSS. But I don't want to do this, it's too troublesome, I want to be simpler.

base64 encoding

With an idea, I thought of base64. After encoding, I don’t need to copy these font files, and it can also reduce the loading volume of website fonts. It really kills two birds with one stone! I won't explain the specific steps, just put all the steps in the script:

#!/bin/bashfont=STKaitieot=$(catfonts/>$font.eot|base64|tr-d'\n'< /span>)woff=$(catfonts/>$font.woff|base64|tr-d'\n')woff2=$(catfonts/>$font .woff2|base64|tr-d'\n')ttf=$(catfonts/>$font.ttf|base64|tr-d'\n' span>)svg=$(catfonts/>$font.svg|base64|tr-d'\n')cat>@font-face>'$font';src:url(data:application/font-eot;charset=utf-8;base64,>$eot)format('eot');font-weight:>font -style:>}@font-face>'$font';src:url(data:application/font-woff2;charset=utf-8;base64,>$woff2)format(< span>'woff2'),url(data:application/font-woff;charset=utf-8;base64,>$woff)format('woff') ,url(data:application/font-ttf;charset=utf-8;base64,>$ttf)format('truetype'),url(data:application/font-svg ;charset=utf-8;base64,>$svg)format('svg');font-weight:>font-style:>}EOF

After executing the above script, a fonts-zh.css is generated, which is the only thing we need, and no additional files are needed.

Introducing CSS

The last step is to introduce the CSS into your website. The specific method is similar. Taking hugo as an example, first copy fonts-zh.css to the static/css/static/css/< /code> directory, and then import the css in <head></head>, with the theme of beatifulhugo[3] For example, directly in layouts/partials/head_custom.html

<link>rel="stylesheet ">href="{{"css/fonts-zh.css"|absURL >

Finally, let the body of the website use the Chinese font. The specific method is to modify the css of the body. Taking hugo's beatifulhugo[4] theme as an example, modify the static/ css/main.css

bodyfont-family:>...}

Alternate fonts can be added, for example:

bodyfont-family:>...}

Indicates that if the STKaiti font is not available, the Cambria font will be used. You're done here, and the specific effect can refer to my website: https://fuckcloudnative.io/[5].

If you don't have obsessive-compulsive disorder, you're done at this point, but I still don't think it's simple enough, so many steps are too cumbersome, I want to automate them all, and put all the steps into an automation script. This is not enough, in order to benefit the public, I created a new warehouse in GitHUb, all the scripts and steps are on it, and friends who need it can take it to be happy~~

Project address: https://github.com/yangchuansheng/font-spider-plus[6]

• How to elegantly use Chinese fonts in web pages[7]
• font-spider makes you fall in love with @font-face custom font[8]

footnote

[1]

Font Spider: http://font-spider.org/

[2]

font-spider-plus:https://github.com/allanguys/font-spider-plus

[3]

beautifulhugo:https://github.com/halogenica/beautifulhugo

[4]

beautifulhugo:https://github.com/halogenica/beautifulhugo

[5]

https://fuckcloudnative.io/:https://fuckcloudnative.io/

[6]

https://github.com/yangchuansheng/font-spider-plus:https://github.com/yangchuansheng/font-spider-plus

[7]

How to elegantly use Chinese fonts in web pages: https://juejin.im/entry/59780ba6f265da6c4c501f61

[8]

Font-spider makes you fall in love with @font-face custom fonts: https://blog.51cto.com/dapengtalk/1854181

Don't let yourself "wall" yourself

● Thoroughly understand matrix multiplication

● How to explain the difference between concurrency and parallelism to a pure girlfriend?

Cloud native is a belief?

Scan Follow the official account

Background Reply◉Graph◉Receive the strongest Kubernetes knowledge graph in history

Click "Read the original" Get better reading experience!

 ❤️Give me a "Looking", it is my greatest support ❤️