Vue project global custom modification of font style – only three steps

Time:2021-10-13

Problem description

In development projects, you can use your own fonts, such as Microsoft YaHei or Song typeface (Song typeface is ugly and not recommended); You can also download fonts to use. This article records how to modify the font in the project.

Step description

There will be reset style sheets (reset. CSS) in projects of different companies to uniformly modify the development style of the project. We modify the font of the project, that is, in reset. CSS.

Step 1: download the font and save it to the project

There are many websites that download fonts for free on the Internet. It’s good to provide a website that downloads fonts for free. Portal attached:
https://www.ypppt.com/ziti/
After downloading the font, we can put the font and reset style sheet together as neighbors, so that it is easy to introduce. As shown below:
Vue project global custom modification of font style - only three steps

The second step is to introduce fonts

We use the @ font face attribute of CSS to import fonts. We can import fonts in the reset style sheet. As shown in the figure below:

@Font face CSS can specify a user-defined font for displaying text; Fonts can be loaded from a remote server or an existing font installed locally by the user

Vue project global custom modification of font style - only three steps

The third step is to use the imported font

It can be used directly in the body, as shown in the following figure:
Vue project global custom modification of font style - only three steps

Finally, let’s look at the renderings

Unmodified font style map

Vue project global custom modification of font style - only three steps

Modified font style diagram

Vue project global custom modification of font style - only three steps

summary

A good memory is not as good as a bad pen. Record it