基于uni-app的微信小程序引入字体文件

上传字体文件至服务器或者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 *;
}

到这里就大功告成啦！

基于uni-app的微信小程序引入字体文件相关推荐

uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
uniapp微信小程序引入字体
案例演示小程序有些字体不支持,我们如何引入,步骤如下: 第一步:下载需要的字体第二步:如果只是用其中的数字,则需要使用工具单独再摘出来,这样文件会很小. 生成新的字体文件,此文件大小很小. 第三步 ...
记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
微信小程序引入字体图标
小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: 一.去官网 http://iconfont.cn 下载 ...
json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...
基于云开发的微信小程序实战教程（二）
基于云开发的微信小程序实战教程(二) 上篇文章中,简单介绍了下小程序云开发的概念,还有开发工具的安装和配置,云开发环境已经搭建完毕. 本章主要内容:微信开发者工具如何使用,小程序云开发的基础目录结构 ...
uniapp开发APP和微信小程序——使用高德实现定位
在uniapp官网中明确说了可以使用高德地图来实现APP和微信小程序的定位. 在dcloud社区里大佬已经给出了实现方法(链接:uni-app 中使用微信小程序第三方 SDK 及资源汇总 - DClo ...
基于云开发的微信小程序：个人相册ByUestcXiye
基于云开发的微信小程序:个人相册ByUestcXiye 作业要求第一次作业第二次作业结课作业小程序开发入门开发前的准备注册微信小程序新建一个模板小程序开通云开发服务第一次作业参考资 ...
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
1.显示效果 2.实现步骤进入阿里巴巴矢量图标库搜索想要的矢量图标并加入购物车,点击右上角购物车将图标添加至项目更改项目设置将字体格式设置为TTF Base64 点击下载至本地在微信小程序 ...

基于uni-app的微信小程序引入字体文件

基于uni-app的微信小程序引入字体文件相关推荐

最新文章

热门文章