2020-06-09 css引入多种字体文件

首先需要在less文件中添加需要引入的文件

@font-face {
  font-family: "ArialBold";
  src: url("../../fonts/ArialBold.woff2") format("woff2"),
  url("../../fonts/ArialBold.woff") format("woff"),
  url("../../fonts/ArialBold.ttf") format("truetype"),
  url("../../fonts/ArialBold.eot") format("embedded-opentype"),
  url("../../fonts/ArialBold.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FZFangSong";
  src: url("../../fonts/FZFangSong.woff2") format("woff2"),
  url("../../fonts/FZFangSong.woff") format("woff"),
  url("../../fonts/FZFangSong.ttf") format("truetype"),
  url("../../fonts/FZFangSong.eot") format("embedded-opentype"),
  url("../../fonts/FZFangSong.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FZKai";
  src: url("../../fonts/FZKai.woff2") format("woff2"),
  url("../../fonts/FZKai.woff") format("woff"),
  url("../../fonts/FZKai.ttf") format("truetype"),
  url("../../fonts/FZKai.eot") format("embedded-opentype"),
  url("../../fonts/FZKai.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "FZHei";
  src: url("../../fonts/FZHei.woff2") format("woff2"),
  url("../../fonts/FZHei.woff") format("woff"),
  url("../../fonts/FZHei.ttf") format("truetype"),
  url("../../fonts/FZHei.eot") format("embedded-opentype"),
  url("../../fonts/FZHei.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

其中
font-family为自定义字体名称，在实际设置字体时，使用的就是这里设置的名称
src中url指的是文件的相对路径，format则为字体的类型

body{
  font-family: FZFangSong;
}

a{
  font-family: FZHei;
}

导入less生成的css文件后，如以上代码进行引用即可实现