vue项目中引入自定义字体

在还原页面的时候可能会遇到微软字体库之外的特殊字体,这种字体就需要自己导入,比如页面中有一些地方需要数字时钟字体来显示,这种就要自己在项目中导入字体文件
在这里插入图片描述
图片上数字时钟字体的资源链接在下方,是一个ttf文件

提取数字时钟字体链接
提取码:ittf
下载的文件打开是下面这个样子的
vue项目中引入自定义字体_第1张图片
文件里面有一个"字体名称",我们的文件名最好和这个字体名称的值一致,文件的后缀名有的是大写的TTF,还有的是小写的ttf,这个后缀名最好是小写的ttf,所以我们这个文件的命名就是’DS-Sigital.ttf’
把字体文件引入到项目中,找一个合适的位置存放这个文件,在使用的时候可以使用相对路径也可以使用绝对路径,我这里就是用相对路径了
vue项目中引入自定义字体_第2张图片
比如要在urbanExpansion.vue文件里面引入这个字体,在这个文件的style标签中引入就可以了,这里要注意font-family要和文件的名字一致,否则可能会报错
因为引入的是ttf文件,所以要加上content-type配置项,还要在src配置项后面加上format('truetype')

@font-face {
  font-family: 'DS-Digital';
  content-type: 'application/x-font-ttf';
  src: url('./common/DS-Digital.ttf') format('truetype');
}

在想要用这个字体的元素上设置font-family:'DS-Digital';就可以了

.left-top-info-num {
   font-family: DS-Digital;
   color: #dabb10;
   font-size: 3rem;
   line-height: 2.8rem;
}

你可能感兴趣的:(css,vue.js,前端,css)