背景

小程序中，我以前做的话从来没设置过字体，全是默认字体；但这次客户要求换种字体，换了几种发现在模拟器中生效，真机预览就不生效了，后来才发现直接设置字体是用的我电脑里的字体，没办法，只能自己下载字体库，然后再引入了。

引入外部字体

我用的字体是阿里图标库中下载的，下载的字体支持字体包下载或者是子集下载，因为我要设置字体的字数不多，就那几个字而已，我为了加载访问速度快点，选择子集下载，这样就是下载自己需要的那几个字就行，大小也就几kb。当然如果要设置字体的字不固定，还是要下载完整的字体包的。

然后将下载的压缩包解压，将里面的woff格式的字体文件上传到服务器中：因为是小程序要用，如果上传到阿里云或其他的平台，还要将域名放入小程序微信公众平台的接口域名配置中，否则线上的小程序是用不了的，因此为了减少步骤，我还是选择放入到服务器中，小程序https域名可以直接访问的位置，注意，这里一定要用https域名，下面会说原因。 下一步是小程序中引入上面的字体链接了，如下图所示，我们在要使用字体的页面wxss样式中使用@font-face引入，设置字体名称和地址，然后在需要用的css属性中字体写自己刚刚设置的就行了。

上面说了加载字体的url必须是https的，是因为如果设置了http的，苹果手机会加载失败，导致苹果手机显示的字体还是默认字体。但是安卓手机是没问题，字体样式正常显示。但是如果设置了https,苹果手机正常显示，但是安卓竟然加载不出来到了，此时的我内心是崩溃的。 于是我百度查了下，发现是字体请求的nginx要设置同源策略配置，即nginx配置中，443端口server配置中加入一下部分，然后重启下nginx服务就好了。

#nginx 小程序字体同源策略配置
    location ~* \.(eot|ttf|woff|woff2|svg)$ {
      add_header Access-Control-Allow-Origin *;
    }

总结

小功能对于小白来说，也是有些坑要踩的，每次碰到类似这样的问题，我们都把它记一下，加深下印象，就成了我们的工作经验了，下次再碰到这样的问题也会有些思路了。