微信小程序使用wx.loadFontFace动态加载字体真机测试无效的原因及解决办法

微信小程序官方提供了wx.loadFontFace方法动态加载网络字体，在开发过程中一切顺利，但是到真机测试时发现没有效果，又变成了默认字体。

仔细查看了官方文档，发现有如下说明：

Tips

1. 字体链接需要是下载类型。
2. 字体文件返回的 content-type 参考 font，格式不正确时会解析失败。
3. 字体链接必须是 https（ios不支持http)。
4. 建议格式为 TTF 和 WOFF，WOFF2 在低版本的iOS上会不兼容。
5. 字体链接必须是同源下的，或开启了cors支持，小程序的域名是servicewechat.com
6. 工具里提示 Faild to load font可以忽略
7. 2.10.0 以前仅在调用页面生效。2.10.0 起支持全局生效，需在 app.js 中调用。
8. 3.7.9 以前 scopes 默认值为 webview。3.7.9 起默认全选。
9. 3.7.9 开始 source 支持传入 Data URL。

那么我们常见的情况就是同源问题，在服务端开启cors支持就可以了，以下以宝塔面板nginx服务器的配置文件示意，将以下代码添加到网站的配置文件中，access_log之前就可以了。

    # 微信小程序 wx.loadFontFace：所有 TTF（CORS + 正确 MIME）
    location ~* \.ttf$
    {
        default_type font/ttf;
        types { font/ttf ttf; }
        add_header Access-Control-Allow-Origin "*" always;
        add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS" always;
        add_header Access-Control-Allow-Headers "Origin, Accept, Content-Type" always;
        add_header Access-Control-Max-Age 86400 always;
        if ($request_method = OPTIONS) {
            return 204;
        }
        expires 30d;
        error_log /dev/null;
        access_log /dev/null;
    }