在项目中使用自定义字体

最新推荐文章于 2024-03-19 11:17:24 发布

某些开发

最新推荐文章于 2024-03-19 11:17:24 发布

阅读量437

点赞数 9

分类专栏：网页与布局文章标签：前端

本文链接：https://blog.csdn.net/weixin_43964866/article/details/135486047

版权

网页与布局专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在项目中创建一个文件夹，用于放字体资源文件
在css中引用

@font-face {
  font-family: fangzheng;
  src: url(assets/ueditor/fonts/FZMWFont.ttf) format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: shangshou;
  src: url(assets/ueditor/fonts/shangshoucanghaishufati.ttf) format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: shangshouxiaoxin;
  src: url(assets/ueditor/fonts/shangshouxiaoxinti.ttf) format('truetype');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: shangshouguhuang;
  src: url(assets/ueditor/fonts/shangshouguhuangti.ttf) format('truetype');
  font-style: normal;
  font-display: swap;
}

在标签上应用

// 分别对应四个标签
.font1 {
  font-family: fangzheng;
}

.font2 {
  font-family: shangshou;
}

.font3 {
  font-family: shangshouxiaoxin;
}

.font4 {
  font-family: shangshouguhuang;
}