uni-app项目里引入的字体图标在小程序正常显示 在h5内无法显示

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app项目里引入的字体图标在小程序正常显示 在h5内无法显示

操作步骤：

@font-face {
font-family: "iconfont-tabbar"; /* Project id 4032548 */
src: url('/static/iconfont/iconfont.ttf?t=1728961944978') format('truetype');
} 
.iconfont-tabbar {
font-family: "iconfont-tabbar" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

预期结果：

能够在h5正常显示

实际结果：

无法显示

bug描述：

uniapp项目里引入的字体图标在小程序正常显示 在h5内无法显示


Harmonyos Next教程
7 回复

图标问题，给一个单页面源码吧，说明 tmepalte+css 这些，h5 里不能正确展示，控制台有报错吗
看 css 没啥问题，多余的样式删除了试试，看看问题在哪里出现的


附件已上传，他这个bug是存在两个字体图标文件的时候才会触发的

应该是被另一个字体图标文件给影响了

已上传附件

好

我测试你的 demo，应该是 iconfont 这个 class 没有定义导致的，搜了一下没结果

在uni-app项目中，如果字体图标在小程序中可以正常显示，但在H5中无法显示，这通常是由于字体文件的加载路径或者字体格式兼容性问题导致的。以下是一些可能的解决方案和代码示例，帮助你排查和解决问题。

1. 确认字体文件路径

首先，确保字体文件的路径在H5中是正确的。uni-app在打包H5时，可能会将静态资源放在不同的目录下。你可以通过开发者工具查看网络请求，确认字体文件的请求是否成功。

<!-- 在你的CSS文件中 -->
@font-face {
  font-family: 'my-icon-font';
  src: url('/static/fonts/my-icon-font.woff2') format('woff2'), /* 推荐使用woff2格式，兼容性好且体积小 */
       url('/static/fonts/my-icon-font.woff') format('woff'),
       url('/static/fonts/my-icon-font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

确保url中的路径与你的项目打包后的路径一致。如果不确定，可以使用相对路径或者绝对路径，并尝试多种组合。

2. 字体格式兼容性

不同的浏览器对字体格式的支持不同。虽然现代浏览器大多支持woff2和woff格式，但为了确保最大兼容性，你可以提供多种格式的字体文件。

3. CSS的font-family引用

确保在你的HTML或组件的CSS中正确引用了这个字体家族。

<style>
.icon {
  font-family: 'my-icon-font';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
  content: "\e900"; /* 确保这里的Unicode码与你的字体文件中的一致 */
}
</style>

<i class="icon icon-home"></i>

4. 清理缓存

有时候，浏览器缓存可能会导致你看到的是旧的资源。尝试清理浏览器缓存或使用无痕模式重新加载页面。

5. 检查CORS策略

如果你的字体文件托管在不同的域上，确保服务器设置了正确的CORS（跨源资源共享）策略。

Access-Control-Allow-Origin: *

或者指定你的应用域名。

通过上述步骤，你应该能够定位并解决uni-app项目中字体图标在H5中无法显示的问题。如果问题依旧存在，可能需要进一步检查具体的错误日志或网络请求详情。

回到顶部