加载字体方案
如果是手机端的需要使用 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没问题,安卓手机也就没问题