微信小程序 - 开发经验分享

第一种方案（推荐）

"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 */