uniapp打包后字体图标不显示怎么办

问题描述

在使用Uniapp进行开发时，可能出现打包后字体图标不显示的问题，这会导致页面显示不正常，影响用户的使用体验。这个问题该如何解决呢？下面我们将会给大家详细介绍。

问题原因

打包后字体图标不显示的原因是因为打包后的路径发生了改变，导致找不到字体文件。在浏览器开发环境下没有问题，但是在打包后就会出现问题。

解决方案

要解决这个问题，我们可以采用以下方式：

1. 在页面引入字体文件

我们可以在使用字体图标的页面中引入相应的字体文件，避免打包后路径出现问题。具体步骤如下：

首先，将字体文件放到项目的“static”文件夹下，并在“/src”文件夹下新建一个“css”文件夹，在该文件夹下创建一个“iconfont.css”文件。

然后，在“iconfont.css”中引入字体文件，并定义字体图标对应的类名，如下所示：

@font-face {
    font-family: 'iconfont';
    src: url('../static/font/iconfont.eot');
    src: url('../static/font/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../static/font/iconfont.woff2') format('woff2'),
    url('../static/font/iconfont.woff') format('woff'),
    url('../static/font/iconfont.ttf') format('truetype'),
    url('../static/font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

最后，在需要使用字体图标的页面中引入“iconfont.css”文件，并将字体图标的类名添加到对应的标签中，如下所示：

<template>
  <div class="container">
    <i class="iconfont icon-icon"></i>
  </div>
</template>
<
<style>>
  @import "../css/iconfont.css";
</style>

2. 修改字体文件的引用路径

如果在项目中多处使用了字体图标，并且每个页面都需要引入对应的字体文件，这样显然比较繁琐。我们可以将字体文件路径设置为相对路径，避免在打包后路径出现问题。具体步骤如下：

首先，将字体文件放到项目的“static”文件夹下。

然后，在“/src”文件夹下新建一个“pages”文件夹，将项目中的各个页面放到该文件夹下。

接着，在“/src”文件夹下新建一个“common”文件夹，创建一个“font.js”文件，用于定义字体文件的路径，如下所示：

const baseURL = process.env.NODE_ENV === 'development' ? '' : '../';
export const fontPath = baseURL + 'static/font/iconfont';

在“/src/main.js”文件中引入“font.js”文件，并将变量“fontPath”挂载到Vue实例的原型上，这样就可以在各个页面中使用了，如下所示：

import Vue from 'vue'
import App from './App'
import 'font.js'
Vue.prototype.$fontPath = fontPath
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()

最后，在需要使用字体图标的页面中引入字体文件，并将字体图标的类名添加到对应的标签中，如下所示：

<template>
  <div class="container">
    <i class="iconfont icon-icon"></i>
  </div>
</template>
<style lang="scss">
  @font-face {
    font-family: 'iconfont';
    src: url('{{ $fontPath }}.eot');
    src: url('{{ $fontPath }}.eot?#iefix') format('embedded-opentype'),
    url('{{ $fontPath }}.woff2') format('woff2'),
    url('{{ $fontPath }}.woff') format('woff'),
    url('{{ $fontPath }}.ttf') format('truetype'),
    url('{{ $fontPath }}.svg#iconfont') format('svg');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
</style>

总结

通过以上两种方式，我们可以解决打包后字体图标不显示的问题。第一种方式适用于在项目中只使用了少量的字体图标的情况，第二种方式适用于在项目中使用了大量字体图标的情况。不管采用哪种方式，都能够有效地避免打包后路径出现问题，让页面显示正常，提升用户的使用体验。