怎么解决小程序里引入网络字体包后小程序模拟器上能够正常加载显示而真机上却加载不了显示不出来的问题

9月前作者：TANGYC_ 分类：Toy博客阅读(36) 违法举报

这篇具有很好参考价值的文章主要介绍了怎么解决小程序里引入网络字体包后小程序模拟器上能够正常加载显示而真机上却加载不了显示不出来的问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果展示

wx.loadfontface真机调用失败,网络相关知识,微信小程序,小程序,字体引入
小程序因为包大小的原因，需要把字体文件放到网络资源上，要想在真机上也能够正常显示字体，这时候请求的字体的网络资源文件头需要满足如下条件：

下载的字体文件的响应头中必须包含：Access-Control-Allow-Origin: *
下载的字体文件的响应头: Content-Type：font/ttf | font/woff | font/woff2 | ...
为了不被缓存影响，建议加上 Cache-Control: no-cache

wx.loadfontface真机调用失败,网络相关知识,微信小程序,小程序,字体引入

如何设置上面的参数呢?

网络字体是放在阿里云oss对象存储的篮子里的,进入阿里云oss设置：
设置跨域规则：
进入文件列表，字体文件处：
设置http头：

彩蛋：

引入字体的两种方式都是可以的

直接在css文件中写@font-face
使用官方写的wx.loadFontFace()引入也可以，代码片段地址https://developers.weixin.qq.com/s/rDIgLImY7hD7

参考连接： https://developers.weixin.qq.com/community/develop/article/doc/000a8a08178258539cbb3f26a51413

https://developers.weixin.qq.com/community/develop/doc/0004841e3e8108082d1799e9c51000?highLine=wx.loadFontFace

https://www.ccc5.cc/2375.html

wx.loadfontface真机调用失败,网络相关知识,微信小程序,小程序,字体引入文章来源地址https://www.toymoban.com/news/detail-644757.html

到了这里，关于怎么解决小程序里引入网络字体包后小程序模拟器上能够正常加载显示而真机上却加载不了显示不出来的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

小程序中引入外部字体的三种方式以及出现的问题

需求：输入一段标题后，可选择不同的字体显示在页面上。免费的商用字体下载链接：链接: https://pan.baidu.com/s/1XLabx_xzC5kJycv7ejJU8Q 提取码: ka4r 1、打开https://transfonter.org/ 2、引入ttf或其他格式的文件，勾选banse64格式输出 3、将输出的文件下载到本地，引入到wxss里面优点：加

2024年02月09日
浏览(44)
Uniapp编译后小程序的代码反编译一些思路

最近客户做的一个微信小程序，可以原来的开发者忘记给他源文件了，只能通过反编译uniapp找回原来的代码，特此记录一下反编译的过程举例：编译后的代码：第一步移除一些没有用的事件第二步将非标签里面的{{}}里面的转变为 vue 事件如第三步将小程序.js里面的o

2024年02月13日
浏览(33)
亲身踩坑多种方法帮你解决 Failed to decode downloaded font VUE 引入字体没有效果

注意，你需要保证你的CSS文件和字体文件在同一个文件夹，且是平级的。把字体文件的格式名称改为小写。结果对我来说没用。参考：参考链接要让 font-family 的名称和字体文件打开后显示的名字一样。就是要那两个名称一样，但是对我依然无效。网络请求中没有对

2024年02月10日
浏览(52)
uniapp引入第三方字体库如（宋体、喜鹊燕书体、字小魂歌以晓手迹行楷体等) 最优解决方案

最近在开发一个写对联的小程序，其中要求对联文字以不同字体呈现，比如（宋体、喜鹊燕书体、字小魂歌以晓手迹行楷体等），如图：一般UI设计给的都是这种.tff格式的字体文件，如图：那么怎么在uniapp中加载第三方字体库呢？经过几天的研究，找到了最优的一个解决

2024年02月03日
浏览(43)
雷电模拟器桥接问题解决方法及ADB更改网络代理问题解决方法

1、选择“开启” 2、桥接网卡的选择：打开控制面板-网络连接-更改适配器进行查看 3、点击“点击安装”安装驱动 4、配置静态IP 选择一个同网段的静态IP地址，我这边选择：192.168.8.11 点击“保存”—“重启模拟器” 注：该代理配置后无法在虚拟器内部查看，只能通过adb方式

2024年02月16日
浏览(155)
win10系统显示字体，模糊鼠标移上去又清晰，请问怎么解决？

首先确定自己电脑的分辨率设置正常（系统-屏幕）然后在调整一下字体清晰度（个性化-字体-调整ClearType文本）如果上面仍旧无法解决问题的话，应该就是显卡设置的问题，很有可能就是最近你在玩某个游戏时修改了N卡的设置，只要将其中的设置关闭就能恢复，具体设置

2024年02月12日
浏览(136)
vue中字体图标引入 - iconfont阿里字体图标库

官网：iconfont-阿里巴巴矢量图标库代码应用中，有许多方法，如何使用该图标库。如，icon单个使用、unicode引用、或 font-class引用（推）、symbol（svg合集）。本文主讲 font-class 方法。支持ie8+，及所有浏览器 1. 获得项目下面的 fontclass 代码加入库 - 选择完所需的图标后，右上

2024年02月09日
浏览(71)
【已解决】Android Studio模拟器没有网络【can‘t provider internet / no internet】问题--20230316

1.在模拟器中找到网络中心，找到默认的AndroidWifi网络，记住其ip地址及默认网关 2.能够看到原本的DNS有问题 3.在自己电脑中找到网络中心，查看本地的DNS服务器 4.在模拟器中，修改AndroidWiFi网络，IP设置为静态，自己填入之前的ip与网关，将默认的DNS更换为上一步查到的本地

2024年02月08日
浏览(53)
前端引入字体文件

上面使用的是方正大标宋字体。首先我们需要有这个字体文件。我目前的目录结构是：全部代码为：我们再看一下普通字体：其实主要就是这几行：好，就这样。

2024年02月08日
浏览(42)
微信小程序在模拟器可以显示，手机扫编译二维码显示不了解决办法

1，本地服务器即是使用localhost，如果希望在手机上可以演示，请把微信开发者工具代码中wx.request请求数据的所有带有localhost的路径全部替换本机的ip地址，如http://localhost:8080/test/hhh, 改成http://172.00.00.000/test/hhh, 这里只是举个例子，查看ip地址方法：打开cmd，输入ipconfig，红色

2024年02月12日
浏览(41)