问题描述
开发的是微信公众号的纯静态H5页面,测试发现在iOS上面首次打开会出现字体图标无法显示的问题,并且切换到其它页面,字体图标也是一样无法显示:
只能使用微信的右上角内的刷新选项,所有页面的图标就可正常显示,浏览其它页也正常:
P.S.所有页面在iOS自带的safari或者chrome浏览器均可正常显示,在android也是正常显示。
相关代码
HTML:
CSS:
@charset "UTF-8";
@font-face {
font-family: "cphfont";
src: url("../../assets/fonts/cphfont.ttf") format("truetype"), url("../../assets/fonts/cphfont.svg?t=1474972592#cphfont") format("svg");
font-weight: normal;
font-style: normal;
}
.cph-icon {
display: inline-block;
font-family: "cphfont" !important;
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
}
.cph-icon.cph-active {
color: #1f446c;
}
.cph-icon.cph-right:before {
float: right;
padding-left: 0.2em;
}
.cph-icon-good:before {
content: "\e65d";
}
.cph-icon-user2:before {
content: "\e660";
}
.cph-icon-user3:before {
content: "\e6a3";
}
.cph-icon-user4:before {
content: "\e6a4";
}
...
已尝试过的办法
刚开始以为是字体文件的问题,重新下载官方的字体文件
编码问题:全部编码均为utf-8,包含html,css,js
尝试把字体文件直接使用嵌入css中
@font-face {
font-family: "cphfont";
src: url(data:application/font-ttf;charset=utf-8;base64,AAEAAAAPAIAAAwBwRkZUT...) format('truetype'),
url('../../assets/fonts/cphfont.svg?t=1474972592#cphfont') format('svg');
font-weight: normal;
font-style: normal;
补充一个细节
微信公众号首次打开时需要授权登录(一次页面跳转),目前这个跳转是由前端的JS代码实现,不知是否由于页面跳转时导致字体文件被浏览器取消下载,授权登录后跳回原页面才导致字体图标无法显示的问题??该问题还是极有可能导致微信浏览器出现问题,待我测试后再补充说明。。。
微信公众号文档