关于自定义组件 @font-face 图标字体不显示问题
发布于 6 年前 作者 yanyu 12526 次浏览 来自 问答

在自定义组件中,我用@font-face来渲染字体图标,但是显示出来的是乱码,而在自定义组件外却正常。

没法渲染

10 回复

你的意思是,图标组件和页面上都没法正常显示吗?

没有复现你的问题,组件和页面上



都是截图里乱码的样子。

是的,都是中间有个打印机的样子。正常显示应该是什么样子?

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

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

正常显示是加号

/* wxss */

[@font-face](/user/font-face) {
font-family: 'iconfont'; /* project id 540717 */
   src: url('//at.alicdn.com/t/font_540717_1da1ynkdlp4lsor.eot');
src: url('//at.alicdn.com/t/font_540717_1da1ynkdlp4lsor.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_540717_1da1ynkdlp4lsor.woff') format('woff'),
url('//at.alicdn.com/t/font_540717_1da1ynkdlp4lsor.ttf') format('truetype'),
url('//at.alicdn.com/t/font_540717_1da1ynkdlp4lsor.svg#iconfont') format('svg');
}
.su-icon {
font-family:"iconfont" !important;
font-size:16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: normal;
/*vertical-align: middle;*/

}

/* wxml */

<view class="su-icon">&#xe622;</view>

你可以在组件和页面上都测试下。

我用阿里图标 http://www.iconfont.cn/ 正常情况下web版没问题,而且用wepy框架写也没问题,但是用小程序模板写就没法正常显示

是不是因为

&#xe69a;

没有正常转义?

额,好像确实不行,我是用的wepy框架,wepy框架会把这个&#xe622转换,而小程序直接这样写好像不行

你好,可以提供一下上面代码的文本吗?我们复现查一下问题。

回到顶部