小程序字体文件跨域导致字体加载失败解决方案，特别是安卓

淩亂°似流年 2024-02-05 14:54 19阅读 0赞

## 加载字体方案 ##

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

![2a26f1356db64a8298ea1a3e1d9c8171.png][]

##  ##

## 问题复现 ##

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

![164988d7b2d842b491607600abe68ff0.png][]

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

![2368291d89204c3f94b1ba83a51b74be.png][]

## 解决方案 ##

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

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

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

![23fcb971a9aa47b491745de0e7e216b4.png][]

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

sudo nginx -t

![f9f000a362ec44cf8a726a49a76790ab.png][]

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

nginx -s reload

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

![e8977490d05045aba73d20efea0b7a91.png][]

[uni.loadFontFace_Object object_ _ uni-app]: https://uniapp.dcloud.net.cn/api/ui/font.html#loadfontface
[2a26f1356db64a8298ea1a3e1d9c8171.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/9c1ca3fa569d4e09ae88bbe0f1ad7d6b.png
[164988d7b2d842b491607600abe68ff0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/8c0f1c8cf65b4818a2b2aa1129f56fb1.png
[2368291d89204c3f94b1ba83a51b74be.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/366cb5a1c00f41d296064ded75ae6450.png
[23fcb971a9aa47b491745de0e7e216b4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/381eff5f6aec47ae81cd2f0d26ccd3e9.png
[f9f000a362ec44cf8a726a49a76790ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/b3b0f764eee248f9a5d7f7b1d6421d3a.png
[e8977490d05045aba73d20efea0b7a91.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/ebe17ce40d6a492c8177fd9b02e52245.png