uni-app uni.loadFontFace只能加载_www/static/目录下的字体，其他目录都会报错

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

uni-app uni.loadFontFace只能加载_www/static/目录下的字体，其他目录都会报错

产品分类

uniapp/App

开发环境信息

项目 信息
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 4.26
手机系统 Android
手机系统版本号 Android 14
手机厂商 一加
手机机型 ace2
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码

uni.loadFontFace({
    family: fontFamily,  
    source: `url(${testurl})`, // 其他文件夹的平台绝对路径  
    success: (res) => {  
        this.selectedLayer.style.fontFamily = fontFamily;  
        this.displayedFonts[i].loaded = true;  
        console.log(res);  
        this.displayedFonts[i].download = true;  
        this.setLayerText(this.selectedLayer, this.selectedLayer.srcText);  
    },  
    fail: function(res) {  
        console.log(res);  
    },  
});

操作步骤

uni.loadFontFace({
    family: fontFamily,  
    source: `url(${testurl})`, // 其他文件夹的平台绝对路径  
    success: (res) => {  
        this.selectedLayer.style.fontFamily = fontFamily;  
        this.displayedFonts[i].loaded = true;  
        console.log(res);  
        this.displayedFonts[i].download = true;  
        this.setLayerText(this.selectedLayer, this.selectedLayer.srcText);  
    },  
    fail: function(res) {  
        console.log(res);  
    },  
});

预期结果

字体成功加载

实际结果

加载失败报错 loadFontFace:fail [object Object]。

bug描述

uni.loadFontFace只能加载_www/static/目录下的字体，其他目录都会报错。报错信息：loadFontFace:fail [object Object]。


Harmonyos Next教程
7 回复

靠，只要是缓存到本地的字体使用这个就会报错，但是他可以加载出来字体


我是加载网络路径的，也会出现

靠字用的好啊，已经不知道靠了多少次

请问你的字体文件放在哪个文件夹能访问，我放在/static/fonts下，android怎么折腾也访问不了

用puls那个获取绝对路径方法，然后加载就可以了，加载字体的bug，uniapp已经修复了

只能加载本地的字体吗，不能访问后端服务器的字体吗

在uni-app中，uni.loadFontFace 方法确实存在一些限制，特别是关于字体文件加载路径的限制。根据官方文档和社区反馈，uni.loadFontFace 方法目前只支持从 _www/static/ 目录下加载字体文件。如果你尝试从其他目录加载字体文件，会遇到报错。

为了解决这个问题，同时保持代码的整洁和功能，你可以通过以下方式确保字体文件被正确加载：

  1. 确保字体文件位于 _www/static/ 目录下： 首先，你需要将你的字体文件移动到项目的 _www/static/ 目录下。例如，如果你的字体文件名为 custom-font.ttf，你应该将其放置在 _www/static/fonts/（假设你创建了一个 fonts 子目录）中。

  2. 使用 uni.loadFontFace 加载字体： 接下来，在你的代码中，使用 uni.loadFontFace 方法来加载这个字体文件。注意路径应该相对于 _www/static/ 目录。

以下是一个示例代码，展示了如何加载并应用自定义字体：

// 假设字体文件位于 _www/static/fonts/custom-font.ttf
uni.loadFontFace({
  family: 'CustomFont', // 自定义字体名称
  source: 'url("/static/fonts/custom-font.ttf")' // 注意路径是相对于 _www/static/ 的
}).then(() => {
  console.log('字体加载成功');
  // 应用字体到某个元素，例如通过 CSS 类
  const style = document.createElement('style');
  style.innerHTML = `
    .custom-font-text {
      font-family: 'CustomFont', sans-serif;
    }
  `;
  document.head.appendChild(style);

  // 示例：将字体应用到某个文本元素
  const textElement = document.getElementById('myText');
  if (textElement) {
    textElement.classList.add('custom-font-text');
  }
}).catch(error => {
  console.error('字体加载失败', error);
});

在上面的代码中，我们首先使用 uni.loadFontFace 方法加载字体，并在加载成功后创建一个 CSS 样式，将自定义字体应用到具有 custom-font-text 类的元素上。

请确保你的字体文件路径正确，并且文件名与你在 source 属性中指定的相匹配。此外，由于字体加载是异步的，你可能需要在字体加载完成后才应用样式，以避免在字体未加载完成时出现的样式问题。

这种方法遵循了uni-app的规范，确保了字体文件能够被正确加载和应用。

回到顶部