小程序安卓和ios使用自定义字体，解决安卓不生效问题

官网介绍

• 官网文件的loadFontFace也可以实现自定义字体引入和使用，如果需要在app.js使用记得加上global：true，不然app.js不会执行
• 背景：项目中要把所有字体改为宋体，这里我使用的是font-face引入外部字体文件

准备字体文件

• 这里我准备的是OTF的文件，是找UI要的。
• 把该文件上传到自己的服务器上，生成一个访问的链接。
• 在app.wxss中使用

@font-face {
    
    
  font-family: 'SimSun700';
  src: url('链接地址必须是https的')format('truetype');
}

.sim-sun700 {
    
    
  font-family: 'SimSun700' !important;
}

• 定义好css的类名，这样在需要使用的直接使用类名

测试

• 定义好字体以后，会发现在模拟器和ios手机上字体是生效的，但是在安卓上字体不生效。

安卓调试解决字体失效问题

• 使用loadFontFace官方的方法，发现在安卓也不好使。但是官网方法中有失败函数回调，发现字体没有加载成功，在看官网有句解释：字体链接必须是同源下的，或开启了cors支持，小程序的域名是servicewechat.com
• 推测应该是同源策略的问题，让后台去服务器开启跨域解决。

//nginx 配置，亲测可用
location ~* \.(eot|ttf|woff|woff2|svg)$ {
    
    
    add_header Access-Control-Allow-Origin *;
}

• 配置完上述代码后，使用font-face引入和loadFontFace引入字体安卓都是生效的。