项目场景
在.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里的使用
网友评论