Use of web fonts

In web development sometimes you need some special style fonts (don't ask me why: for the sake of force). How do you generally deal with this problem?

font-family

This is the property of css to set the font:

 p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

However, the styles that can be set in this way are very popular, and it is difficult to give people a refreshing feeling. So I'm trying to find an other way to style the font.

Some clues can be found here

@font-face

There is a @font-face block at the beginning of the CSS, which means that any browser that supports web fonts can use the font you specify, which specifies the font file to download:

 @font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}

If you have used Ali's icon library, you should be familiar with the above syntax. At this time, we have realized that it is very powerful, because icons can also be introduced into your project as fonts.

Below this, you can apply your custom font to whatever you like using the font type name specified in @font-face, for example:

 html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

To find a good looking font, our task shifts to finding .ttf, .woff, .woff2... these files

Web Open Font Format (WOFF) (Web Open Font Format) is a new web font format developed by Mozilla in collaboration with Type Supply, LettError, and others.

Notice:

• The fonts in the font-family are written casually (the font files are not introduced in the font-face), and the problem of infringement will not be involved.
• If you want to cite font files in font-face, you have to use free or purchased fonts. There are few open source Chinese fonts.

Available font-face resources

There are many good-looking fonts available for personal use, but if you want to use them for commercial use, please pay attention to commercial licenses.

The texture of this handwriting is much higher.

In fact, in addition to using this font-face, we can import font style files, such as Google font (completely free and open source). The next article will introduce the usage of Google Fonts.

If the article helped you, please help to like it, thank you.