解决uniapp静态文件字体包太大打包大小超出限制

简介: 解决uniapp静态文件字体包太大打包大小超出限制

一、解决uniapp静态文件字体包太大打包大小超出限制

1.在app.vue文件下使用本地文件修改为网络路径

文件大小超过20m可以使用cdn加速我使用unicloud(示例):

<style lang='scss'>
  /* 全局引入思源黑体 */
  /* @import url('@/common/SourceHanSansCN/SourceHanSansCN.css'); */
  /* 路径为测试路径不能打开 */
  @import url('https://7463-tcb-reu231rfsoklfql25373e40-8cac7c-1304419594.tcb.qcloud.la/字体包/SourceHanSansCN.css');
</style>

2.修改css里面的字体路径

@font-face{
    font-family: "Bold";
    /* src: url('~@/common/SourceHanSansCN/SourceHanSansCN-Bold.otf')format('opentype'); */
    src: url('https://7463-tcb-reu231roklfql25373e40-8cac7c-1304419594.tcb.qcloud.la/字体包/SourceHanSansCN-Bold.otf')format('opentype');
    /* font-weight: normal;
     font-style: normal; */
  }
  @font-face{
    font-family: "ExtraLigh";
    /* src: url('~@/common/SourceHanSansCN/SourceHanSansCN-ExtraLight.otf')format('opentype'); */
    src: url('https://7463-tcbre-reu231roklfql25373e40-8cac7c-1304419594.tcb.qcloud.la/字体包/SourceHanSansCN-ExtraLight.otf')format('opentype');
     font-weight: normal;
     font-style: normal;
  }
  @font-face{
    font-family: "Light";
    /* src: url('~@/common/SourceHanSansCN/SourceHanSansCN-Light.otf')format('opentype'); */
    src: url('https://7463-tcb-reufd231roklfql25373e40-8cac7c-1304419594.tcb.qcloud.la/字体包/SourceHanSansCN-Light.otf')format('opentype');
     font-weight: normal;
     font-style: normal;
  }
  @font-face{
    font-family: "Medium";
    /* src: url('~@/common/SourceHanSansCN/SourceHanSansCN-Medium.otf')format('opentype'); */
    src: url('https://7463-tcb-reu231fdsroklfql25373e40-8cac7c-1304419594.tcb.qcloud.la/字体包/SourceHanSansCN-Medium.otf')format('opentype');
     font-weight: normal;
     font-style: normal;
  }
  @font-face{
    font-family: "Normal";
    /* src: url('~@/common/SourceHanSansCN/SourceHanSansCN-Normal.otf')format('opentype'); */
    src: url('https://7463-tcb-reu2fds31roklfql25373e40-8cac7c-1304419594.tcb.qcloud.la/字体包/SourceHanSansCN-Normal.otf')format('opentype');
     font-weight: normal;
     font-style: normal;
  }
  @font-face{
    font-family: "Heavy";
    /* src: url('~@/common/SourceHanSansCN/SourceHanSansCN-Heavy.otf')format('opentype'); */
    src: url('https://7463-tcb-reu231rfdsoklfql25373e40-8cac7c-1304419594.tcb.qcloud.la/字体包/SourceHanSansCN-Heavy.otf')format('opentype');
     font-weight: normal;
     font-style: normal;
  }
  @font-face{
    font-family: "Regular";
    /* src: url('~@/common/SourceHanSansCN/SourceHanSansCN-Regular.otf')format('opentype'); */
    src: url('https://7463-tcb-reu231rofdsklfql25373e40-8cac7c-1304419594.tcb.qcloud.la/字体包/SourceHanSansCN-Regular.otf')format('opentype');
     font-weight: normal;
     font-style: normal;
  }
  @font-face{
    font-family: "ZhenyanRegular";
    /* src: url('@/common/SourceHanSansCN/ZhenyanGB-Regular.ttf'); */
    src: url('https://7463-tcb-reu231rfdsoklfql25373e40-8cac7c-1304419594.tcb.qcloud.la/字体包/ZhenyanGB-Regular.ttf');
     font-weight: normal;
     font-style: normal;
  }

大功告成

文件储存默认可以使用uni-app提供的uniCloud云存储使用完全免费。

相关文章
|
7月前
|
编解码 数据安全/隐私保护 开发者
uniapp打包的ipa上架到appstore的傻瓜式教程
uniapp打包的ipa上架到appstore的傻瓜式教程
92 0
|
7月前
uniapp三元表达式判断状态更改字体颜色?
uniapp三元表达式判断状态更改字体颜色?
|
7月前
|
移动开发 安全 前端开发
优化 uniapp 发行操作:一键打包、混淆代码
优化 uniapp 发行操作:一键打包、混淆代码
352 0
|
7月前
|
编解码 数据安全/隐私保护 iOS开发
uniapp IOS从打包到上架流程(详细简单) 原创
uniapp IOS从打包到上架流程(详细简单) 原创
210 0
|
7月前
|
开发者 iOS开发
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
245 3
|
6月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的箱包存储系统附带文章源码部署视频讲解等
50 5
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
333 3
|
2月前
|
数据可视化 搜索推荐
重磅更新-UniApp自定义字体可视化设计
重磅更新-UniApp自定义字体可视化设计
55 0
|
5月前
|
开发者 iOS开发
uniapp打包苹果应用到哪里去获取私钥证书和证书profile文件
ios的应用,分两种安装方式,一种是上架app store的安装方式,一种是上传到一些应用内测的平台,进行扫码安装。
152 4
|
5月前
uniapp 打包成 apk(原生APP-云打包)免费
uniapp 打包成 apk(原生APP-云打包)免费
311 1
下一篇
DataWorks