项目场景：

首先：我们按照正常步骤引入。
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文件里面的名称一致）

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

微信小程序如何引入外部字体包
1.先将字体包文件转换为ttf.eot.svg.woff(最好是ttf文件)格式字体文件转换 2.将字体文件转为base64 转换地址操作步骤如下: 3.将下载得到的stylesheet.css文 ...
微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份进行了网站维护,维护之后,不能"生成在 ...
微信小程序：引入自定义字体
微信小程序引入外部字体看了网上很多文章后发现可以把字体上传到https://transfonter.org/转成base64后下载下来, 引入对应css后发现太大啦, 然后在网上搜罗了一番,发现了一 ...
微信小程序--icon引入外部图标
本博客仅仅只是个意外.大佬请绕道. 第一步:搭建框架首先你得有个微信小程序的开发工具,然后把小白架构搭建好.(不会去看官网). 简单的初步框架搭建完之后目录和界面是这个样子: 如果想加一个底部tab ...
小程序接入h5页面_微信小程序跳转外部链接（h5页面）以及数据交互
最近项目有个需求,在微信小程序中跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面. 1.跳转外部链接(官方文档) 1)入口 //跳转到入口 wx.navigateTo({url: '.. ...
微信小程序html文章添加跳转链接,微信小程序跳转外部链接（h5页面）以及数据交互...
最近项目有个需求,在微信小程序中跳转外部链接完成相关的操作,操作完成后返回微信小程序的相关页面. 1.跳转外部链接(官方文档) 1)入口 //跳转到入口 wx.navigateTo({url: '.. ...
微信小程序加载外部字体
文章目录下载字体加载字体使用下载字体阿里巴巴普惠体加载字体 ...wx.login({success: (res) => {this.loadBabaFont() // 必须登录后, ...
uniapp开发小程序，引入腾讯兔小巢插件，兔小巢页面导航头部样式错乱问题
uniapp开发小程序,引入腾讯兔小巢插件,导航头部样式错乱问题 uniapp开发小程序,引入腾讯兔小巢插件,导航头部样式错乱问题 uniapp开发微信小程序,所有页面头部导航都是自定义的,引入腾讯兔 ...
微信小程序使用苹方字体
第一种方式,base64 encode 如果字体比较小,如各种英文字体,可以把字体上传到 Online @font-face generator - Transfonter 转换成base64格式,然 ...

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

项目场景：

问题描述

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

最新文章

热门文章