第一种方案(推荐)
"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 */ |