vue引入字体文件的正常步骤走一遍
1 . 下载字体文件并放入项目中
在这里插入图片描述
2 . 新建一个文件,font.css(不新建也行,.less和.scss也行)只要能引入到单页面或者main.js中就可以
注意!!!:这个css文件一定要和字体文件在同级目录下,要不然可能会出现字体不起作用的情况
font.css文件里就这样写就完事了,压根不用写什么format后缀

@font-face {
  font-family: 'D-DIN';
  src: url('D-DIN.ttf');
  font-weight: normal;
  font-style: normal;
}

format后缀,不同后缀的字体文件,需要配置的format后缀都不一样
文字后缀名必须小写

@font-face {
  font-family: 'D-DIN';
  src: url('D-DIN.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

3 . 引入并使用即可
font-family: "D-DIN"后面的字体名,加不加引号都一样
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐