解决引入外部字体 @font-face 不生效

项目场景

在.vue 文件中引入

 @font-face {
   font-family: specialFonts ;
   src: url("@/assets/font/ZaoZiGongFangJianHei-1.ttf");
 }

在css 中使用

.text {
  font-family: 'MF JianHei (Noncommercial)';
}

效果图

网页的效果

image.png

客户端的效果 （没有生效）

image.png

解决方案

主要转换下格式，采用css引用
1.进入转换网站 https://transfonter.org/](https://transfonter.org/
2.点击Add fonts 按钮，把后缀 .ttf字体文件导入

image.png
3.转换完之后，点击 Convert
image.png
4.将下载的文件放到资源文件夹下
image.png
5.css 中引入在使用即可

<style>
@import '@/assets/font/stylesheet.css';
.text {
   font-family: 'MF JianHei (Noncommercial)';
}
</style>

PS：下载的文件里有demo.html，可以看下demo里的使用