小程序嵌入 H5 页面字体失效怎么办？

小程序嵌入的 H5 页面字体失效的解决方法

问题：

在 Vue 开发的 H5 页面中，配置了自定义字体 fontface，但在 iOS 系统的小程序中，字体却失效了。

答案：

小程序的 webview 组件需要配置以下事项：

• 白名单配置：
  确保在小程序配置文件中已将 H5 页面 URL 添加到白名单列表。
• HTTPS 协议：
  小程序的 webview 仅支持通过 HTTPS 协议加载资源，确保 H5 页面和字体包已部署在支持 HTTPS 的服务器上。

排查步骤：

• 查看微信开发者工具：

  在微信开发者工具中查看小程序配置，确保已正确配置白名单。

• 查看控制台错误：

  在小程序中打开开发者控制台，查看是否有与字体加载相关的错误信息。

• 使用 vConsole：

  在实机测试时，使用 vConsole 等工具查看控制台日志，排查潜在的字体加载问题。