模拟器和ios上都能正常显示,但安卓机上显示不了,准确地说显示为一个带框的X
css代码如下:
@font-face {
font-family: "iconfont";
src: url('https://xxx/iconfont.eot'); /* IE9*/
src: url('https://xxx/iconfont.eot?#iefix') format('embedded-opentype'),
url('https://xxx/iconfont.woff') format('woff'), /* chrome, firefox */
url('https://xxx/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('https://xxx/iconfont.svg#iconfont') format('svg') /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
我花了两天时间找到了原因, 直接引用线上的,要在安卓下能正常显示要设置服务器允许跨域,
或者将字体文件转出base64直接引入,希望能帮上忙,不要在入坑了
我这里直接base64的也显示不出来。。请问知道是怎么回事吗?
你只是定义了字体你没有使用字体,需要设置 .icon::before{ font-family:iconfont!important; }
感谢楼主,确实没有加入字体类名
感恩!
我是将ttf字体文件,通过这个网站https://transfonter.org/ 转化为base64位 然后把下载的文件中的.css文件中的第二个“@font-face”复制下来插入到app.wxss中 就可以正常使用啦!
在模拟器上可以显示在安卓端不显示
我也是模拟器正常,真机 方框里一个X。
之前只引入了iconfont.css。将iconfont.tff也加入项目,就可以了。
请问我的base64拷入微信开发工具中总报错,是因为太长了吗?怎么办啊?就想实现一个楷体的效果。
https的ios能用,http的开发者工具和android能用。。。
你好!!!请问为什么我这里遇到的情况是安卓能正常显示但IOS不能显示????
请问 我的怎么报 something must be wrong 这个错!
楼上正解,万分感谢,但我有一个小小的疑问,就是我之前用的url使用本地文件路径的时候控制台会报错,人家说必须放线上,然后我就换成了线上的链接,果然可以,现在我用了base64之后,按理来说使用的是本地文件,但是却没有像之前那样报错,说明其实把ttf放在本地也是可以的,所以,为什么base64的本地文件就可以,而.ttf的本地文件就不行呢?