微信小程序「 Skyline-Worklet-ios-Andorid 」项目实战-04

像素粒子

已于 2025-03-23 14:02:37 修改

阅读量551

点赞数 10

文章标签：微信小程序小程序

于 2025-03-23 13:50:51 首次发布

本文链接：https://blog.csdn.net/weixin_37638924/article/details/146453447

版权

一、概述

使用字体库可以给app添加更个性化的视觉效果，微信小程序中使用wx.loadFontFace加载动态网络字体。还有一个是加载内置字体的wx.loadBuiltInFontFace。我们加载网络字体还可以使用@font-face{}的形式。

**wx.loadFontFace({})**
属性	类型	默认值	必填	说明	最低版本
global	boolean	false	否	是否全局生效	wx.loadBuiltInFontFace
family	string		是	定义的字体名称
source	string		是	字体资源的地址，可以为 https 链接或者 Data URL。

二、基本使用

微信使用wx.loadFontFace()动态加载网络字体。我们可以去iconfont上下载免费字体

下载后得到要使用 .woff 和 .woff2 类型的文件，上传到自己或可以访问的远程服务器。

App({
  onLaunch() {
    this.globalData = {
      appName: '多时壁纸', // app名称
      windowInfo: null, // 设备布局与APP基础信息
      lang: 'zh_CN', // 当前语言
      theme: 'light', // 主题外观
      screenType: Number(wx.getStorageSync('screen')) || 0, // 选择的屏幕类型信息【0: 手机、1: 平板、2: 桌面】
      deviceType: 0, // 当前的设备类型 0:手机、1:平板
    }
    // 获取窗口信息
    const windowInfo = wx.getWindowInfo()
    // 获取设备基础信息
    windowInfo.deviceInfo = wx.getDeviceInfo()
    // 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
    windowInfo.clientRect = wx.getMenuButtonBoundingClientRect()
    // APP基础信息
    windowInfo.appBase = wx.getAppBaseInfo()
    // 计算appbar高度
    windowInfo.appbarHeight = windowInfo.clientRect.bottom + windowInfo.clientRect.top - windowInfo.statusBarHeight
    // 计算胶囊边距
    windowInfo.padding = windowInfo.windowWidth - windowInfo.clientRect.right
    // 计算头部导行高度
    windowInfo.headerHeight = windowInfo.appbarHeight - windowInfo.statusBarHeight
    // 设备宽高比例
    windowInfo.ratio = windowInfo.screenWidth / windowInfo.screenHeight
    // 加入全局数据
    this.globalData.windowInfo = windowInfo
    console.log(windowInfo)

    // 加载网络字体
    wx.loadFontFace({
      family: 'wfy',
			source: 'url("https://vhome-4gtecpvp8a2f1141-1259471910.tcloudbaseapp.com/AlimamaFangYuanTiVF-Thin.woff")',
			global: true,
      success: console.log,
      fail: console.log
    })
    // 加载内置字体
	wx.loadBuiltInFontFace({
      family: 'WeChatSansSS',
			source: 'WeChatSansSS',
			global: true,
      success: console.log,
      fail: console.log
    })
  }
})

在根目录下创建 font.wxss 在再 app.wxss 引入。

@font-face {
  font-family: "wfy";src: url("https://vhome-4gtecpvp8a2f1141-1259471910.tcloudbaseapp.com/AlimamaFangYuanTiVF-Thin.woff?sign=24e42f3ca81a02838ca727bd06f30aa5&t=1741670737"),
  url("https://vhome-4gtecpvp8a2f1141-1259471910.tcloudbaseapp.com/AlimamaFangYuanTiVF-Thin.woff2?sign=8cd248614620c08c29ff82963e1a4c8b&t=1741669251");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.wfy {
  font-family: wfy;
}

@import './common.wxss';
@import './iconfont.wxss';
@import './font.wxss';
page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 28rpx;
  color: #030303;
  background-color: transparent;
}

使用

.title {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 30rpx;
  font-family: wfy, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 800;
}