微信端字体图标显示不正常（不显示/显示成方框）

一开始的思考方向
发现错误的原因
出错的原理
解決方案

iOS 中微信端打开项目发现图标显示成一个个方框；切换页面也同样没显示。但是在Android端、IOS的浏览器显示正常
【借用下网上的效果】

一开始的思考方向

一开始怀疑是字体图标的导入出错了，所以重新导入，但是仍然没解决。因为网上也很多说字体图标文件导入顺序等等问题影响。但这并没有解决我的问题。

发现错误的原因

后来又重新思考为什么偏偏是 ios&&微信端才出问题，意识到我的微信端为了做微信授权登录跳转了一遍地址。会不会是这一次跳转引起的。所以我决定先不跳转地址，结果真的就正常了。

出错的原理

后来翻阅资料终于找到了出错的真相，IOS的微信端，是因为缓存机制引起的。

          // 具体原因：刚进入页面会检测微信环境的话会发生一次跳转（获取微信用户信息）,在未跳转前，浏览器正在下载图标文件；而跳转使得// 这些文件下载终止导致不完整。再跳转后想下载这些文件但因为浏览器缓存机制问题所以复用那些不完整的文件.

解決方案

微信登录不跳转，右后台静默完成（推荐）；
window.onload()方法中执行跳转，因为此时文件都下载完毕
延迟跳转（在用）

最后祝福大家生活愉快

微信端字体图标显示不正常（不显示/显示成方框）相关推荐

移动端字体图标不显示的Bug
用16进制编码的字体图标在部分小米机型显示不正常. 测试机型:小米1,小米1s,小米2 浏览器:微信6.1内置浏览器,QQ浏览器 5.7 X5内核字体图标:不显示 svg图标:显示正常以下来自额微 ...
微信彩色字体图标的使用
iconfont字体图标的官网iconfont // vant icon使用自定义iconfont单色图标 import '@/assets/iconfont/iconfont.css'// icon ...
css高级技巧(精灵图、字体图标、三角、vertical-align属性、溢出文字省略号等)
css高级技巧 1.精灵图 1.1.为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送图片,造成服务器请求压力过大,这将大大降低页面的加载 ...
如何在openlayers中使用iconfont或font Awesome字体图标
目录前言 1.准备工作 2.新建一个最简单的helloworld页面 3.看看效果 4.注意点1-需使用Unicode写法 4.注意点2-需注意iconfott.woff2的请求顺序 5.特殊图标的 ...
iconMoon和iconfont字体图标的使用
以下教程参考哔哩哔哩pink老师的视频一. 字体图标的使用场景:主要用于显示网页中通用.常用一些小图标例如:百度的搜索框里面的相机和放大镜二. 为什么有些场景用字体图标代替精灵图: 图片文件还是 ...
html 字体图标不显示不出来了,h5页面字体图标显示不正常
问题描述开发的是微信公众号的纯静态H5页面,测试发现在iOS上面首次打开会出现字体图标无法显示的问题,并且切换到其它页面,字体图标也是一样无法显示: 只能使用微信的右上角内的刷新选项,所有页面的图标 ...
自定义字体图标android h5不适配,h5页面字体图标显示不正常
问题描述开发的是微信公众号的纯静态H5页面,测试发现在iOS上面首次打开会出现字体图标无法显示的问题,并且切换到其它页面,字体图标也是一样无法显示: 只能使用微信的右上角内的刷新选项,所有页 ...
微信小程序使用base64字体图标（生成字体图标+将字体图标转为base64格式）
问题: 1.微信小程序不能随意使用网络资源,如字体,css文件等 2.不能在小程序中使用字体文件 3.不能使用background-position背景图片定位来使用内部png图片下面就介绍一下如何 ...
移动端/微信引入字体不生效
1.问题引入新字体,在PC端显示正确,之前同样的字体在移动端显示正确,但在微信端显示失效. 2.原方法 a.在assets下新建字体文件夹(font文件夹),在新的字体包存入font中,并在font ...

微信端字体图标显示不正常（不显示/显示成方框）

微信端字体图标显示不正常（不显示/显示成方框）

一开始的思考方向

发现错误的原因

出错的原理

解決方案

微信端字体图标显示不正常（不显示/显示成方框）相关推荐

最新文章

热门文章