全局字体样式引入无效
发布于 5 年前 作者 yonggao 2855 次浏览 来自 问答
  • 当前 Bug 的表现（可附上截图）

在 app.js 中进行引入网络字体样式，代码如下：

onLaunch: function () {
  wx.loadFontFace({
      family: 'HYZhengYuan',
      source: 'url("https://xxx.com/fonts/HYZhengYuan-45W-2.otf")',
      success: function (res) {
        console.log("字体加载成功：" + res.status) //  loaded
      },
      fail: function (res) {
        console.log("字体加载 error：" + res.status) //  error
      },
      complete: function (res) {
        console.log("字体加载：" + res.status);
      }
    });
}

随后在 app.wxss 中配置字体样式：

page {
  background-color:#F7F7F7;
  height:100%;
  font-family: HYZhengYuan !important;
}

发现只有 index 页面下除 textarea 引入无效之外，其他内容均应用字体样式成功，但是其他的页面则引用无效。

在模拟器中演示效果正确，但在实际真机上，textarea 无效，部分截图如下：

以下为测试设备型号：

模拟器：iPhone X

真机：iPhone XS MAX

  • 预期表现

在全局 app.js 加载字体样式，并在 app.wxss 中引用后，当前小程序字体样式随即变更。

  • 复现路径
  • 提供一个最简复现 Demo
2 回复

你好，textarea是原生组件，不支持使用该接口添加的字体，具体请参考：https://developers.weixin.qq.com/miniprogram/dev/api/wx.loadFontFace.html

我也遇到同样的问题（基础库 2.6.6），在 onLaunch 中执行官方的例子无法正常加载，在开发工具中只有在执行函数的地方加断点才可以激活字体，不加断点刷新页面几个回调函数都不会被调用，原因不明。


App({
  onLaunch: function () {
    // 加断点
    wx.loadFontFace({
      family: 'Bitstream Vera Serif Bold',
      source: 'url("https://sungd.github.io/Pacifico.ttf")',
      success(res) {
        console.log(res.status)
      },
      fail: function (res) {
        console.log(res.status)
      },
      complete: function (res) {
        console.log(res.status)
      }
    });
  }
});


在具体页面内调用没发现问题，但不能全局统一加载是很麻烦的事情，希望能解决这个问题。

回到顶部