Explain how to introduce font-face in CSS

Time:2019-9-7

Why use this? Start with making posters. It was a rainy and windy night…

Okay, let’s get down to business. Why use it? Because browsers don’t have fonts.

So why should you tell me? I won’t go to W3C school to study by myself. Yes, but it’s not faster and easier for me to provide you with it.

How to use it

@font-face{
     Font-family:'Font name is arbitrary'; 
     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 something to the HTML code to write the special text you want

H1 {font-size: 36px; color:# ccc; font-family: `font name is arbitrary';}

This is the end of thanking you for watching (hey, can you stop throwing eggs and broken cabbage, I went on to say);

1. Where can I find the font is the key. I will use it, but I will not use it.

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

Here you can find the font that is supported in our system and download it into font folder (font folder is level with CSS and images)

2. The downloaded font is too large, which results in loss of performance performance (not to mention a lot)

Solution: Word spider (can extract the part of the font needed, usually a few k, that’s all right)

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

1) If you want to use spider, you need to install node or git first. It’s no problem to use spider as front-end.

2) Start the installation of spider after installation. Copy this sentence with command line or git: NPM install font-spider-g, you can use Taobao mirror as well.

3) Long wait, after installation, we can first check font-spider-V and see the version number to prove that you have installed successfully, Nice.

4) Remember to put the megabytes of fonts you downloaded into the font folder we just mentioned.

5) Create a new CSS stylesheet, define the font, copy the following, and enter the font name you just named in font, so that the font formats are defined.

@font-face{
     Font-family:'Font name is arbitrary'; 
     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 something to the HTML code to write the special text you want

H1 {font-size: 36px; color:# ccc; font-family: `font name is arbitrary';}

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

For example:

If the cutter is in the root directory, it can be directlyfont-spider demo.html

or

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

Of course, I’m going to show you the way to your computer.

The above is the whole content of this article. I hope it will be helpful to everyone’s study, and I hope you will support developpaer more.

Recommended Today

Source Code Compilation and Installation of Redis

Briefly describe the installation of Redis in Ubuntu (16.04) environment. Installation dependency Because it’s source code compilation, you have to rely on it.makeCommands are compiled, and the system does not have a compiler, so we have to install some things that the compiler needs first: apt-get update && apt-get install -y gcc automake autoconf libtool […]