收藏
回答

全局字体样式引入无效

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 客户端 7.0.3 2.3.0

- 当前 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


回答关注问题邀请回答
收藏

3 个回答

  • Junyi
    Junyi
    2019-05-03

    我也遇到同样的问题(基础库 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)
          }
        });
      }
    });


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


    2019-05-03
    有用 1
    回复 1
    • 黑与白
      黑与白
      2019-07-17
      俺也一样
      2019-07-17
      回复
  • 摘星
    摘星
    2023-07-09

    这个问题解决了吗


    2023-07-09
    有用
    回复
  • 灵芝
    灵芝
    2019-04-16

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


    2019-04-16
    有用
    回复 2
    • 2019-04-16

      您好,那针对非 Canvas 原生组件,目前每页单独加载字体样式后才可使用加载的字体,能不能直接在 app.js 中加载,之后后续的每个页面的非 Canvas 原生组件字体样式改变呢


      2019-04-16
      1
      回复
    • wy
      wy
      2019-09-06回复
      您好,您这个问题解决了没有?
      2019-09-06
      回复
登录 后发表内容