小程序怎么判断三方字体是否加载完成

Question

做个小程序聊天，进去默认应该是在最下面，如果没有加载三方字体是正常的

加载三方字体，会有一个过程，三方字体所占高度似乎比默认的高一些，导致又撑起来了，导致没有在最下面

想请教，小程序有什么办法可以判断三方字体是否加载完成吗？

Answer 1

在uniapp小程序中，您可以使用CSS本地加载或CSS远程加载的方式引入三方字体。当字体加载完成时，loaded事件将被触发。以下是一个示例代码：

/* 本地加载 */
@font-face {
  font-family: 'iconfont';
  src: url('~@/static/iconfont.ttf') format('truetype');
}
.iconfont {
  font-family: 'iconfont';
}

在上面的代码中，iconfont是您要加载的字体名称，src参数是字体文件的URL。当字体加载完成时，loaded事件将被触发。

// 远程加载
@font-face {
  font-family: 'iconfont';
  src: url('https://xxxxx/font.ttf') format('truetype');
}

在上面的代码中，iconfont是您要加载的字体名称，src参数是字体文件的URL。当字体加载完成时，loaded事件将被触发。