Detailed explanation of how to introduce custom fonts (font-face) in CSS

Why did I use this? It all started with the making of the poster. It was a stormy night. . .

Okay, let’s stop talking nonsense and get back to the topic. Why do we use it? Because the browser doesn’t have the font.

Then why should you tell me? I myself won’t go to w3cschool to read and learn. Yes, but wouldn't it be quicker and easier if I could provide you with

How to use

@font-face{
     font-family: 'You can name the font at will'; 
     src: url('../font/font name.eot');
     src:url('../font/font name.woff') format('woff'),
         url('../font/font name.ttf') format('truetype'),
         url('../font/font name.svg') format('svg');
}

//Add an h1 or other text in the HTML code, and write the special text you want inside it h1{font-size:36px; color:#ccc;font-family: "font name is up to you";}

It ends here. Thank you for watching (Hey, can you please stop throwing eggs and breaking cabbages? I’ll continue talking);

1. Where to find the font is the key. I know how to use it but it’s useless without the font. .

Font download: https://www.jb51.net/fonts/

Here you can find the fonts generally supported by our system and download them and put them in the font folder (the font folder can be at the same level as css and images)

2. The downloaded font is too large, which results in poor performance (otherwise there are many problems)

Solution: Zizhu (It can extract the required part of the font, which is usually only a few KB, so it should be OK)

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

1) If you want to use Zizhu, you must first install node or git, which is fine as a front-end;

2) After installation, start installing font-spider. Use the command line or git to copy this sentence: npm install font-spider -g You can also use Taobao mirror

3) After a long wait, we can first test font-spider -V after the installation is complete. Seeing the version number proves that you have installed it successfully, Nice.

4) Remember to put the multi-megabyte fonts you downloaded into the font folder we just mentioned.

5) Create a new CSS style sheet, define the font, copy the following into it, and enter the font name you just named in font. In this way, all the formats of the font are defined.

@font-face{
     font-family: 'You can name the font at will'; 
     src: url('../font/font name.eot');
     src:url('../font/font name.woff') format('woff'),
         url('../font/font name.ttf') format('truetype'),
         url('../font/font name.svg') format('svg');
}

//Add an h1 or other text in the HTML code, and write the special text you want inside it h1{font-size:36px; color:#ccc;font-family: "font name is up to you";}

6) The key step is to generate the abbreviations you need. Enter font-spider+space+path in git or node: font-spider ./demo/*.html

for example:

If the disk is in the root directory, you can directly use font-spider demo.html


or

font-spider C:\Users\13246\Desktop\cropper\demo.html

Of course, I am demonstrating this, so the specific path depends on your computer.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.