苍山暮色烟雨迟
苍山暮色烟雨迟
  • 发布:2025-05-15 16:48
  • 更新:2025-05-15 17:25
  • 阅读:53

【报Bug】引入字体导致 video 在 h5 中不显示中间播放按钮

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 15.3.2 (24D81)

HBuilderX类型: 正式

HBuilderX版本号: 4.65

浏览器平台: Chrome

浏览器版本: 136.0.7103.93

项目创建方式: HBuilderX

示例代码:

@font-face {
font-family: 'FZDHTJW';
src: url('/static/font/FZDHTJW.TTF');
}
@font-face {
font-family: 'FZHTJW';
src: url('/static/font/FZHTJW.TTF');
}

  • {
    font-family: 'FZHTJW', sans-serif !important;
    }

操作步骤:

创建一个新项目,在 app.vue引入字体

预期结果:

不影响 video 标签中间显示播放按钮

实际结果:

在 h5 中不显示了

bug描述:

升级 4.65 之后,原有的视频 video 标签在 h5 中的播放按钮不显示了,安卓 iOS 正常,之前版本正常。
经过排查是因为引入字体库导致 font-family: 'uni-video-icon'; 引用无效。

.uni-video-icon {  
    font-family: 'uni-video-icon'; // 被划线  
    text-align: center;  
}
2025-05-15 16:48 负责人:DCloud_UNI_JBB 分享
已邀请:
DCloud_UNI_JBB

DCloud_UNI_JBB

感谢反馈,问题已复现,已加分

临时解决方案

.uni-video-icon {    
    font-family: 'uni-video-icon' !important; // 被划线    
    text-align: center;    
}

要回复问题请先登录注册