【uniapp、微信小程序】解决引入外部字体在H5中生效，微信开发者工具中不生效的问题

最新推荐文章于 2025-10-20 14:55:20 发布

原创最新推荐文章于 2025-10-20 14:55:20 发布 · 3.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #vue.js #前端

在项目中遇到CSS字体不显示的问题，通过将ttf文件上传到在线转换工具Transfonter，转换为CSS格式并引入到App.vue中，解决了字体在H5和微信开发者工具中无法显示的故障。步骤包括导入ttf文件、转换、下载CSS、引入样式及正确使用。

项目场景：

首先：我们按照正常步骤引入。
1、在App.vue中引入：

@font-face {
	     font-family: 'Branding-BoldItalic';  //自定义的，一会儿用这个
	     src: url('~@/static/font/Branding-BoldItalic.woff2.ttf');
	 }

2、在页面的CSS中使用：

text {
	     font-family: Branding-BoldItalic;  //用刚刚自定义的
	 }

3、效果图：
a、H5页面上：

斜体生效
b、微信开发者工具里面：
没生效

问题描述

解决：把引入格式转换一下就可以生效了：
1、首先进入这个网站：https://transfonter.org/
2、把ttf等文件导入，点Add fonts那里；
在这里插入图片描述
3、转换（点上面Convert）；
4、把下载下来的CSS文件放到项目里；
5、在App.vue的style中引入：

@import './static/css/Branding-BoldItalic.css';

6、再去使用就行了。（注意使用时要和你的css文件里面的名称一致）