Use custom fonts and custom font icons in css

Download and install Adobe Illustrator CC 2019abbreviated as AIDownload
and install FontLab7abbreviated as AI

Software installation package:
link: https://pan.baidu.com/s/1C8d44Y2z4ro7hKg9amt86g extraction code: tvng

Why use custom fonts for custom fonts?

Browsers support different fonts. In a nutshell:不是所有的字体浏览器都支持!

In other words:要使用浏览器不支持的字体，就得通过其它方法解决

solution:

Use in css3 @font-facecan support fonts not supported by browsers

第一步You need the font file xxx.ttfor xxx.eotuploaded to the server, so that the external network to download the font file

第二步, Use the @font-faceimported external font in the page that needs to use the font, set as follows

One of them srcis to import the font file, and then font-familydefine a name for the font. For example:myFont

<style type="text/css">
  @font-face {
     
     
    font-family: myFont;
    src: url('自定义的字体文件.ttf'),
    url('自定义的字体文件.eot'); /* IE9+ */
  }

  /*使用方式如下*/
  div {
     
     
    font-family: myFont;
  }
</style>

Finally, set the font-family value for the css of the specified element to be the name defined above

For the above ttyfiles, in the windows operating system: C:\Windows\Fontsthere are a lot of tty files stored under the
following is a partial screenshot of the font file

Insert picture description here

Font icon (vector font)

The difference between vector fonts and ordinary fonts is that vector fonts will not deform or change color with scaling.

Custom font icon

Principle: The custom font icon is bound by 字体and 矢量图.

First need to draw vector

Use Adobe Illustrator CC 2019 --下面简称AIto draw vector

File -> New in AI,
default to
Insert picture description here
use the toolbar to draw vector icons

Insert picture description here
I drew a house as follows

Then Ctrl + A to select all, Ctrl + C to copy, and finally need to be pasted into Fotolab7
Insert picture description here

Then bind the font and icon

Use FontLab7to bind the font and vector diagram to
open FotoLab7 to create a new font
Insert picture description here

The third step is to copy and paste the signature through the icon drawn by AI into the double-clicked window

Insert picture description here

The fourth step, export the font, format ttf

Insert picture description here

Then there will be the following folder

with a ttf file in the innermost

Step 5: Convert the ttf file into a woff file supported by the browser

Use any of the online sites below to convert

Step 6, unzip and download the compressed package

Copy the woff and woff2 files inside to the project, refer to the code of the css file content provided after decompression, copy and paste the css code inside into the project to use

The use case is in the decompressed file

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
		@font-face {
     
     
			font-family: 'Unnamed';/*这个值是 后面类中font-family需要填入的内容*/
			src: url('Unnamed-Regular.woff2') format('woff2'),
				url('Unnamed-Regular.woff') format('woff');
			font-weight: normal;
			font-style: normal;
			font-display: swap;
		}
		.your-style {
     
      /*这个类名自己定义*/
			font-family: 'Unnamed'; /*和上面font-family的值一样*/
			font-weight: normal;/*默认值不用改*/
			font-style: normal;/*默认值不用改*/
			font-size:200px;/*设置字体大小200px*/
			color:red;/*字体颜色红色*/
		}
    </style>
</head>
<body>
<div class="your-style">A</div>
</body>
</html>

Final rendering
Insert picture description here