【Vue2-uniapp】Vue引入iconfont失败原因-文件查找失败:【绝对路径错误】【OTS parsing error: invalid sfntVersion: 1008813135】

最新推荐文章于 2025-03-14 10:02:31 发布

weixin_43343144

最新推荐文章于 2025-03-14 10:02:31 发布

阅读量7.5k

点赞数

文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/weixin_43343144/article/details/121052971

版权

本文档描述了在uniapp项目中遇到ttf字体文件加载失败的问题，问题源于路径设置不正确。解决方法是使用绝对路径，并在路径前添加'@'符号。通过修改@font-face的src属性，确保每个字体文件的路径都正确引用，从而成功解析并使用字体。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器错误提示【说白了就是ttf字体文件下载失败，路径有问题,请更换为绝对路径】：

Failed to decode downloaded font: http://localhost:8080/common/style/css/iconfont/iconfont.ttf
:8080/#/:1 OTS parsing error: invalid sfntVersion: 1008813135

/*
    1、由于当前项目为uniapp项目,绝对路径必须加@
    2、如果绝对路径不加@则会报错【Failed to decode downloaded font: http://localhost:8080/xxx/iconfont/iconfont.ttf】
*/

@font-face {
    font-family: "iconfont"; /* Project id 2898895 */
    src: url('@/common/style/css/iconfont/iconfont.woff2') format('woff2'),
    url('@/common/style/css/iconfont/iconfont.woff') format('woff'),
    url('@/common/style/css/iconfont/iconfont.ttf') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-ETH:before {
    content: "\e60c";
}