加载字体方案

如果是手机端的需要使用 loadFontFace 这个api来实现加载字体文件，使用uniapp的或者微信的都可以，使用方法看官网说明：uni.loadFontFace(Object object) | uni-app官网

如果使用css的加载方式，可能会无法定位字体失效bug出现的原因，但是loadFontFace有加载失败的接口，所以可以查看报错的原因，下面是css加载字体的方式，不推荐使用

@font-face {font-family: 'hado-font';src: url('https://字体文件链接');
}

使用 loadFontFace 的api代码：在app.vue中的onLunch钩子函数里面使用

  // 加载网络字体uni.loadFontFace({family: 'hado-font',global: true,source: 'url("https://你的域名字体文件地址")',success() {console.log('hado-font加载成功')},fail(err) {console.log('hado-font加载失败', err)},complete() {console.log('hado-font字体加载');}})

问题复现

字体加载失败没有生效：这个问题主要是安卓手机小程序和h5端会存在这个问题，苹果手机小程序好像是不存在的，但是存在问题的原因都是一样的，那就是发生了cors跨域：下面这个是h5端的跨域

安卓手机端的话，会报下面的错误："loadFontFace:fail "，并没有说明是跨域导致的，但是如果你的字体文件和链接都没问题，那就是跨域导致的。

解决方案

前提说明：字体文件链接必须是https的，字体文件必须能正常使用，将域名添加到小程序后台 downloadFile合法域名 列表中，推荐将链接也放到request合法域名列表。

1.在服务端或者nginx上配置允许跨域，我这里是通过配置nginx跨域来完成的，找到nginx的配置文件，然后添加一个nginx配置：

location ~ .*\.(eot|otf|ttf|woff|woff2|svg)$
{add_header Access-Control-Allow-Origin *;
}

检查一下配置是否正确：ok和successful表示没问题

 sudo nginx -t

配置没问题后，还要重新加载配置文件并重新启动nginx：让配置文件生效

nginx -s reload

 然后再重新打开就发现字体加载成功了：只要h5没问题，安卓手机也就没问题