基于uni-app的微信小程序引入字体文件
上传字体文件至服务器或者oss(也可以引入第三方,需支持nginx跨域)引入字体文件(两种方法)css引入@font-face {font-family: 'fontFamily';src: url("https://xxxxxxx/fontFile.ttf?_=2019121810");/* 小程序似乎只支持线上文件的引入,文件还不能过大*/}.test{font-family: butterF
·
- 上传字体文件至服务器或者oss(也可以引入第三方,需支持nginx跨域)
- 引入字体文件(两种方法)
-
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函数中使用才成功
- 配置Nginx跨域(解决安卓机型小程序字体没生效的问题),成功后headers会有如下项
location ~* \.(eot|ttf|woff|woff2|svg)$ {
root /data/youzan/;
add_header Access-Control-Allow-Origin *;
}
到这里就大功告成啦!
更多推荐
已为社区贡献3条内容
所有评论(0)