创意电子

标题: 微信小程序 - 开发经验分享 [打印本页]

作者: Designer°尒鵬 时间: 2020-10-12 02:47
标题: 微信小程序 - 开发经验分享
第一种方案（推荐）

"vw" = "view width" "vh" = "view height"

使用 CSS3 引入的 vw / vh 基于宽度/高度相对于窗口大小。
/* 元素根据手机屏幕宽高占位100% */.view { height: 100vh; width: 100vw;}第二种方案

使用微信小程序提供的 API 来获取窗口大小，具体看文档。
onLoad: function () { this.setData({ height: wx.getSystemInfoSync().windowHeight, width: wx.getSystemInfoSync().windowWidth }) }引入第三方字体（使用网络字体艺术字）

当然，也可以直接使用微信 API wx.loadFontFace ，具体请查看官方示例文档。

引入一套第三方字体（我这里只提供如上图所示的第三方字体），网上很多字体库。
在 CSS 文件中写入自定义字体样式。
调用。

具体演示代码：
演示1/* 字体封装 */@font-face { font-family: "blod"; src: url('https://static.heytea.com/taro_trial/v1/font/WenYue-XinQingNianTi-NC-W8_1.otf');}/* END *//* 使用 */.main-title { font-family: 'blod'; font-size: 55rpx; padding-bottom: 20rpx;}/* END */

欢迎光临创意电子 (https://wxcydz.cc/)