CSS uses font weigh to select different fonts according to their thickness

Seeing this title, someone's first reaction may be font-weigh  Is it to control the font thickness? Why choose a different font package?

Because many fonts do not contain thickness levels, set font-weight  Is invalid!

Let's look at the following example

Use the same font, font-weight  Set to 600, 500, 400, 300 respectively

 @font-face {     font-family: B;     src: url('A.ttf'); } .f {     font-family: 'B'; }

 <ul> <li class="f" style="font weight: 600;">600 Lao Li next door</li> <li class="f" style="font weight: 500;">500 Lao Li next door</li> <li class="f" style="font weight: 400;">400 Lao Li next door</li> <li class="f" style="font weight: 300;">300 Lao Li next door</li> </ul>

As a result, the font thickness we see is the same

next Have something different

We passed @font-face  In font-weight  Property to set different thickness and use different font packages

 @font-face {     font-family: A;     src: url('A-B.ttf');     font-weight: 600; } @font-face {     font-family: A;     src: url('A-M.ttf');     font-weight: 500; } @font-face {     font-family: A;     src: url('A-R.ttf');     font-weight: 400; } @font-face {     font-family: A;     src: url('A-L.ttf');     font-weight: 300; } .ff {     font-family: 'A'; }

Explanation: When a font is called A font-weight  When it is 600, A-B.ttf font is used; when it is 500, A-M.ttf font is used; when it is 400, A-R.ttf font is used; when it is 300, A-L.ttf font is used.

We apply the following HTML code

 <ul> <li class="ff" style="font weight: 600;">600 Lao Li next door</li> <li class="ff" style="font weight: 500;">500 Lao Li next door</li> <li class="ff" style="font weight: 400;">400 Lao Li next door</li> <li class="ff" style="font weight: 300;">300 Lao Li next door</li> </ul>

Different thickness effects appear

In this way, we can font-weight Choose different fonts to make the web design more refined!