注册 登录
绿色心情
绿色心情
  • 发布：2018-12-06 11:51
  • 更新：2018-12-06 18:01
  • 阅读：1566

【报Bug】关于iconfont在ios平台的使用问题

分类：uni-app
iOS

详细问题描述（DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题）
[内容]

重现步骤
[步骤]
1、在HbuilderX中新建uni-app项目，模板选择【演示uni-app的组件、接口、模板】
2、在 @/components/tab-nvue/mediaList.nvue 和 mediaList.vue 中增加相同的测试代码：
2.1 在 template 中增加如下代码： 

<view>  
    <text>测试1: &#xe201; --此处没有引用任何class，但是在ios端貌似显示的是ios系统图标（预期应该是乱码）；在微信端显示是乱码（预期的结果）</text>  
    <text class="iconfont-default">测试2: &#xe201; --这里引用了"iconfont-default"样式，该样式引用的是示例项目自带的 uni.tff 中的字体图标，结果在ios端显示结果同“测试1”(预期结果应该是uni.tff中一个示意为“邮件”的图标)；微信端显示为预期的结果</text>  
    <text class="iconfont-custom">测试3: &#xe6fe; 这里是引用的是阿里icon库中的字体图标，但是在ios端不生效，显示乱码；在微信端显示的是预期结果</text>  
</view>

2.2 在style 中增加如下代码：

    @font-face {  
        font-family: 'iconfont';    
        src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');   
    }  
    .iconfont-default{  
        font-family:iconfont!important;  
        font-size:30upx;  
        padding: 0 4%;  
    }  

    @font-face {  
        font-family: 'custom-icon';    
        src: url('https://at.alicdn.com/t/font_934497_76eqs2767zd.ttf') format('truetype');   
    }  
    .iconfont-custom{  
        font-family:custom-icon!important;  
        font-size:30upx;  
    }

[结果]
同样引入字体图标，在IOS端显示的是结果不是预期结果，在微信端显示正常；（详见附件中图片对比）

IOS端显示结果：

**微信端显示结果：***

[期望]
[如果语言难以表述清晰，可以拍一个视频或截图，有图有真相]

IDE运行环境说明
HBuilderX
[IDE版本号]
1.1.0.20181030
[windows版本号]
win 10

[mac版本号]

App运行环境说明
IOS 12.1(16B92)
[手机型号]
iPhone 6s
[模拟器型号]

附件
[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]
[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]
[安装包]

联系方式
[QQ]23642241

  • Hello_uni-app.rar
    • 2018-12-06 11:51 负责人:无 分享

    没有找到相关结果

      已邀请:
      Trust

      Trust - 少说废话

      上传下可以重现问题的项目

      2018-12-06 12:08 分享

      • 绿色心情 (作者)

        项目附件已上传，麻烦帮忙看下，谢谢

        2018-12-06 13:35

      • Trust

        回复 绿色心情:你这个代码不对吧，怎么是 Hello MUI 啊？

        2018-12-06 15:10

      • 绿色心情 (作者)

        没问题啊，就是在示例项目上，我自己增加了调用iconfont的代码，想看看效果。你没看步骤描述吗？？？

        2018-12-06 15:23

      • Trust

        回复 绿色心情:我是说你上传的示例是 Hello MUI。从截图看，应该是用了 nvue，weex 里面的 icon 用法和普通 Web 不一样，需要用它提供的模块，参考：https://weex.apache.org/cn/references/modules/custom_font.html

        2018-12-06 15:25

      • 绿色心情 (作者)

        抱歉，上传附件的时候选错了。刚才重新上传项目附件了，麻烦您再看下，多谢！

        2018-12-06 15:29

      评论 取消
      Trust

      Trust - 少说废话

      这是一个简单的示例，可以参考一下。

      <template>  
    <div>  
        <text class="icon">abcdef</text>  
    </div>  
</template>  

<script>  
    var domModule = weex.requireModule('dom');  
    domModule.addRule('fontFace', {  
        'fontFamily': 'texticons',  
        'src': "url('https://at.alicdn.com/t/font_702773_g9f89om4v3j.ttf')"  
    });  
    export default {  
        data() {  
            return {  

            };  
        },  
        created() {  

        }  
    }  
</script>  

<style>  
    .icon {  
        color: #FF3333;  
        font-size: 36px;  
        font-family: texticons;  
    }  
</style>
      2018-12-06 15:38 分享

      • 绿色心情 (作者)

        请问“<text class="icon">abcdef</text>” abc中间是个什么字符，我这显示就一个方框，复制出来后是个中文汉字。

        另外这段代码我直接复制到一个新建的nvue页面中，还是显示不出来图标呢

        2018-12-06 16:48

      • Trust

        回复 绿色心情:&#xe60c;

        2018-12-06 16:51

      • 绿色心情 (作者)

        改成 &#xe60c; 了，还是乱码。。。。。

        2018-12-06 17:21

      • Trust

        回复 绿色心情:不是在 nvue 里面么，把我提供的这个示例完整地抄过去就行了。

        2018-12-06 17:31

      • 绿色心情 (作者)

        是在nvue里面，我新建了一个nvue文件，然后把你的代码整个粘贴进去的，我选择的是运行到苹果手机，出来的效果依然是乱码

        2018-12-06 17:40

      • Trust

        回复 绿色心情:试一下安卓

        2018-12-06 17:41

      • 绿色心情 (作者)

        安卓试了下也不行

        2018-12-06 17:56

      • Trust

        回复 绿色心情:。。。上截图或者录个短视频看下

        2018-12-06 17:57

      • Trust

        回复 绿色心情:找到原因了，Weex 里面这个必须用双引号。。。具体看示例代码里面 src 值的变化。

        2018-12-06 18:00

      • 绿色心情 (作者)

        是这段代码里面要用双引号吗？ var domModule = weex.requireModule("dom"); 录了个视频上传了，麻烦您看下，多谢

        2018-12-06 18:22

      • Trust

        回复 绿色心情:是 src 的值，里面那个 url 必须用单引号，示例我更新了，你仔细看下。

        2018-12-06 18:28

      • 绿色心情 (作者)

        嗯，改完双引号之后可以了！太好了，我之前一直按照文档里的写法来做的，看来app端和小程序端关于iconfont的代码写法是不一样的，有时间可以更新下文档 ：）

        2018-12-06 18:32

      • Trust

        回复 绿色心情:这个 nvue 是 Weex 的规范。。。如果都是 .vue 文件的话，规范是一致的。

        2018-12-06 18:33

      • 绿色心情 (作者)

        回复 Trust:好的，明白了，我小白刚接触这块的内容，辛苦你了！

        2018-12-06 18:46

      评论 取消
      为什么被折叠? 0 个回复被折叠

      该问题目前已经被锁定, 无法添加新回复

      退出全屏模式 全屏模式 回复
      友情链接
      优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 艾普阳科技 申请友链

      DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

      京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

      | | 违法违规信息举报