@font-face {
font-family: "iconfont"; / Project id 3938063 /
src: url('~@/static/iconfont.ttf') format('truetype');//url('https://xxxx.com/h5/static/iconfont.ttf') format('truetype');
}
![7***@qq.com](https://img-cdn-tc.dcloud.net.cn/account/identicon/34a90217997d1929d97cface81a89644.png)
- 发布:2023-03-17 15:48
- 更新:2023-03-17 15:48
- 阅读:164
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 10
浏览器平台: Chrome
浏览器版本: 110.0.5481.178
项目创建方式: CLI
CLI版本号: 3.7.3
操作步骤:
预期结果:
@font-face {
font-family: "iconfont"; / Project id 3938063 /
src: url('./static/iconfont.ttf') format('truetype');
}
@font-face {
font-family: "iconfont"; / Project id 3938063 /
src: url('./static/iconfont.ttf') format('truetype');
}
实际结果:
@font-face {
font-family: "iconfont"; / Project id 3938063 /
src: url('https://xxxx.com/h5/static/iconfont.ttf') format('truetype');
}
@font-face {
font-family: "iconfont"; / Project id 3938063 /
src: url('https://xxxx.com/h5/static/iconfont.ttf') format('truetype');
}
bug描述:
引入字体图标文件后,不管这里路径如何写(/或./或~@/)。发布成 PC网站后,打包路径是 /h5 后,这个字体文件 的路径是 域名+文件,并不是 域名+/h5+文件。所以导致文件不存在。目前只能引用 http路径才可以
![](http://img-cdn-tc.dcloud.net.cn/uploads/questions/20230317/04f892878e0060e07bf4799376b05f56.png)
![](http://img-cdn-tc.dcloud.net.cn/uploads/questions/20230317/65f1b4d658bb9be52f8fc6c743b4fcc7.png)