vue项目引入自定义字体，兼容ie

YJ_0518

已于 2024-01-16 10:31:10 修改

阅读量890

点赞数

分类专栏： css vue 文章标签： vue.js javascript 前端

于 2022-07-26 16:16:05 首次发布

本文链接：https://blog.csdn.net/weixin_45606890/article/details/125997245

版权

vue 同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

1.vue引入自定义字体

（1）在style文件夹下创建font.scss文件，并引入字体包文件
在这里插入图片描述
（2）在main.js中引入font.scss文件
（3）css代码

.eot字体包用来兼容ie浏览器

@font-face {
  font-family: YouSheBiaoTiHei;
  src: url('YouSheBiaoTiHei.eot?#iefix') format('embedded-opentype'),
        url('YouSheBiaoTiHei.ttf');
}
@font-face {
  font-family: Source Han Sans CN-Bold;
  src: url('SourceHanSans-Bold.eot?#iefix') format('embedded-opentype'),
        url('SourceHanSans-Bold.ttf');
}
@font-face {
  font-family: Source Han Sans CN-Regular;
  src: url('SourceHanSans-Regular.eot?#iefix') format('embedded-opentype'), 
        url('SourceHanSans-Regular.ttf');
}