在还原页面的时候可能会遇到微软字体库之外的特殊字体,这种字体就需要自己导入,比如页面中有一些地方需要数字时钟字体来显示,这种就要自己在项目中导入字体文件
图片上数字时钟字体的资源链接在下方,是一个ttf文件
提取数字时钟字体链接
提取码:ittf
下载的文件打开是下面这个样子的
文件里面有一个"字体名称",我们的文件名最好和这个字体名称的值一致,文件的后缀名有的是大写的TTF,还有的是小写的ttf,这个后缀名最好是小写的ttf,所以我们这个文件的命名就是’DS-Sigital.ttf’
把字体文件引入到项目中,找一个合适的位置存放这个文件,在使用的时候可以使用相对路径也可以使用绝对路径,我这里就是用相对路径了
比如要在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;
}