uniapp中iconfont使用

准备

1、添加需要使用的图标到项目中，并生成CDN链接，下载字体包到本地

2、解压字体包，将iconfont.css和iconfont.ttf文件复制到static目录下

全局引用(.vue文件)

在App.vue文件中进行全局注册

<style>
    /*每个页面公共css */
    @font-face {
      font-family: 'iconfont';  /* Project id 2809767 */
      src: url('https://at.alicdn.com/t/font_2809767_pffxmckbg4b.woff2?t=1631838708484') format('woff2'),
           url('https://at.alicdn.com/t/font_2809767_pffxmckbg4b.woff?t=1631838708484') format('woff'),
           url('https://at.alicdn.com/t/font_2809767_pffxmckbg4b.ttf?t=1631838708484') format('truetype');
    }
    
    .icon-icon {
        font-family: iconfont;
    }
</style>

App下原生tabbar的按钮如果使用字体图标(s示例代码如下)

         "iconfontSrc":"static/font/iconfont.ttf",
        "list": [{
                "pagePath": "pages/tabBar/index/index",
                "iconPath": "static/images/tabBar/home.png",
                "selectedIconPath": "static/images/tabBar/home_selected.png",
                "text": "首页",
                "iconfont":{
                    "text":"\ue846",
                    "selectedText":"\ue846",
                    "selectedColor":"#007AFF",
                    "color":"#7A7E83",
                    "fontSize":"18px"
                }
            }]

• 使用字体图标时 unicode 字符表示必须 ‘\u’ 开头，如 “\ue123”（注意不能写成"\e123"）
• 自定义原生导航栏使用iconfont图标时，必须配合iconfont.ttf文件使用

nvue 文件中使用

<template>
<view class="info-text" v-if="options.detail_text"><text
                        class="icon-icon">&#xe842;</text><text  class="text">{{options.detail_text}}</text></view>
</template>
<script>
    export default {
         
        created() {
            // #ifdef APP-PLUS
            const domModule = weex.requireModule('dom')
            domModule.addRule('fontFace', {
                'fontFamily': "iconfont",
                'src': "url('http://at.alicdn.com/t/font_2809767_pffxmckbg4b.ttf?t=1631838708484')"
            });
            // #endif
        },
         
    }
</script>
​
<style lang="scss">
​
    .icon-icon {
        font-family: iconfont;
    }
</style>   

从官方文档中可以看到，nvue页面不能使用css导入字体

问题：报错 ReferenceError: weex is not defined

uni.requireNativePlugin 无法在微信小程序中使用

nvue 只能在app端使用或者app好用