为什么iconfont字体图标在安卓机上显示不出来
发布于 6 年前 作者 chao99 14288 次浏览 来自 问答
  1. 模拟器和ios上都能正常显示,但安卓机上显示不了,准确地说显示为一个带框的X

  2. 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;

}

8 回复

请问我的base64拷入微信开发工具中总报错,是因为太长了吗?怎么办啊?就想实现一个楷体的效果。

你好!!!请问为什么我这里遇到的情况是安卓能正常显示但IOS不能显示????

请问 我的怎么报 something must be wrong 这个错!

https的ios能用,http的开发者工具和android能用。。。

我也是模拟器正常,真机 方框里一个X。

之前只引入了iconfont.css。将iconfont.tff也加入项目,就可以了。

我花了两天时间找到了原因,  直接引用线上的,要在安卓下能正常显示要设置__服务器允许跨域,__

或者将字体文件转出base64直接引入,希望能帮上忙,不要在入坑了

楼上正解,万分感谢,但我有一个小小的疑问,就是我之前用的url使用本地文件路径的时候控制台会报错,人家说必须放线上,然后我就换成了线上的链接,果然可以,现在我用了base64之后,按理来说使用的是本地文件,但是却没有像之前那样报错,说明其实把ttf放在本地也是可以的,所以,为什么base64的本地文件就可以,而.ttf的本地文件就不行呢?

我是将ttf字体文件,通过这个网站https://transfonter.org/ 转化为base64位  然后把下载的文件中的.css文件中的第二个“@font-face”复制下来插入到app.wxss中  就可以正常使用啦!

回到顶部