1. 上传字体文件至服务器或者oss(也可以引入第三方,需支持nginx跨域)
  2. 引入字体文件(两种方法)
    • css引入

      @font-face {
        font-family: 'fontFamily';
        src: url("https://xxxxxxx/fontFile.ttf?_=2019121810"); 
        /* 小程序似乎只支持线上文件的引入,文件还不能过大*/ 
      }
      .test{
      	font-family: fontFamily;/* 不需要引号 */
      }
      
    • js引入

      let [err, res] = await uni.loadFontFace({
      	family: 'fontFamily', 
      	source: 'url("https://xxxxxxx/fontFile.ttf?_=2019121810")'
      });
      // 使用是和css引入一样的 font-family: fontFamily;
      

tip:uni-app的文档上说loadFontFace接口引入字体需要在app.vue,而我在app.vue上使用并没有返回值,在需要引入的页面的onload函数中使用才成功

  1. 配置Nginx跨域(解决安卓机型小程序字体没生效的问题),成功后headers会有如下项
location ~* \.(eot|ttf|woff|woff2|svg)$ {
	root /data/youzan/;
	add_header Access-Control-Allow-Origin *;
}

跨域配置

到这里就大功告成啦!

效果图

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐