css - 手机触屏版 icomoon 字体图标 不显示和乱码

问题描述

问 题

用不同浏览器测试
发现使用谷歌或者火狐时，字体图标不显示或者乱码，而使用QQ浏览器或者360浏览器正常
截图如下
谷歌浏览器和火狐浏览器

360浏览器正常显示

调试截图如下，发现谷歌和火狐这个文件没有加载/icomoon.eot?hp1ejl#iefix
谷歌浏览器调试截图

360浏览器调试截图

CSS代码：

/*字体图标*/
@font-face{font-family:icomoon;src:url(../fonts/icomoon.eot?hp1ejl#iefix) format(embedded-opentype), url(../fonts/icomoon.ttf?hp1ejl) format(truetype), url(../fonts/icomoon.woff?hp1ejl) format(woff), url(../fonts/icomoon.svg?hp1ejl#icomoon) format(svg);font-weight:400;font-style:normal;}
i.w-icon{font-family:icomoon;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.w-icon-back:before{content:"\e900";}
.w-icon-local:before{content:"\e901";}
.w-icon-money:before{content:"\e902";}
.w-icon-call:before{content:"\e903";}
.w-icon-speaker:before{content:"\e904";}
.w-icon-close:before{content:"\e905";}
.w-icon-tag:before{content:"\e906";}
.w-icon-user:before{content:"\e907";}
.w-icon-board:before{content:"\e908";}
.w-icon-local-two:before{content:"\e909";}
.w-icon-user-two:before{content:"\e90a";}
.w-icon-mail:before{content:"\e90b";}
.w-icon-eye:before{content:"\e90c";}
.w-icon-sign:before{content:"\e90d";}
.w-icon-male:before{content:"\e90e";}
.w-icon-female:before{content:"\e90f";}
.w-icon-phone:before{content:"\e910";}
.w-icon-search:before{content:"\e911";}
.w-icon-page:before{content:"\e912";}
.w-icon-like:before{content:"\e913";}
.w-icon-home:before{content:"\e914";}
.w-icon-ring:before{content:"\e915";}
.w-icon-search-two:before{content:"\e916";}
.w-icon-collect:before{content:"\e917";}
.w-icon-pic:before{content:"\e918";}
.w-icon-down:before{content:"\e919";}
.w-icon-has-collect:before{content:"\e91a";}
.w-icon-comment:before{content:"\e91b";}
.w-icon-booked:before{content:"\e91c";}
.w-icon-booking:before{content:"\e91d";}
.w-icon-people:before{content:"\e91e";}
.w-icon-star:before{content:"\e91f";}
.w-icon-board-two:before{content:"\e920";}
.w-icon-tree:before{content:"\e921";}
.w-icon-clock:before{content:"\e922";}
.w-icon-book:before{content:"\e923";}
.w-icon-up:before{content:"\e924";}
.w-icon-del:before{content:"\e925";}
.w-icon-coming:before{content:"\e926";}
.w-icon-has-download:before{content:"\e927";}
.w-icon-logreg:before{content:"\e907";}
.w-icon-hr:before {content: "\e318";}
.w-icon-newhome:before {content: "\e319";}
.w-icon-sresume:before {content: "\e31a";}
.w-icon-sjob:before {content: "\e31b";}

解决方案

@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot?w118d');
    src:url('../fonts/icomoon.eot?#iefixw118d') format('embedded-opentype'),
        url('../fonts/icomoon.woff2?w118d') format('woff2'),
        url('../fonts/icomoon.woff?w118d') format('woff'),
        url('../fonts/icomoon.ttf?w118d') format('truetype'),
        url('../fonts/icomoon.svg?w118d#Linearicons-Free') format('svg');
    font-weight: normal;
    font-style: normal;
}

骑士cms 亲测有效

这篇关于css - 手机触屏版 icomoon 字体图标 不显示和乱码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！