实际开发过程中，可能会使用自己的字体，下面开始介绍@font-face使用方法

1.介绍

@font-face
指定了一种用于显示文本的自定义字体；该字体可以从远程服务器加载，也可以从用户自己的计算机上的本地安装的字体加载。

2.语法

@font-face {
  font-family: "Trickster";
  src: local("Trickster"),
    url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf")
      format("opentype"), url("trickster-outline.woff") format("woff");
}

3.使用 可以新建一个 font.css文件，里面写入如下内容(可以同时定义多个字体文件)

@font-face {
  font-family: "Trickster";
  font-weight:300;
  src: url("trickster-COLRv1.otf") format("opentype");
}
@font-face {
  font-family: "Trickster";
  font-weight:400;
  src: src: url("trickster-COLRv1.otf") format("opentype");
}
@font-face {
  font-family: "Trickster";
  font-weight:500;
  src: src: url("trickster-COLRv1.otf") format("opentype");
}

4.说明

A font-weight value. Accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400;
翻译过来：font-weight 可以是一个单值，也可以是一个范围值

5.Font MIME Types

字段名说明
FormatID
FormatMIME type
TrueTypefont/ttf
OpenTypefont/otf
Web Open Font Formatfont/woff
Web Open Font Format 2font/woff2