微信原生或自定义字体

微信小程序的字体设置需遵循其设计规范，具体可分为以下两种情况：

一、使用微信原生字体

微信小程序默认使用系统字体，确保与运行环境保持一致，提升用户体验。推荐优先使用微信官方提供的字体样式：

• 字号 ：常用字号为20、18、17、16、14、13、11（pt）

• 颜色 ：主内容为黑色（Black），次要内容为灰色（Grey），链接为蓝色（Blue）等

• 样式 ：支持加粗（bold）、斜体（italic）等基础样式

若需调整字号，可通过微信开发者工具的编辑设置功能实现：

1. 打开开发工具，点击顶部「设置」→「编辑设置」→「外观」调整字号；

2. 或者在代码中动态修改编辑器字体大小。

二、自定义字体设置

若需使用自定义字体（如思源黑体），需通过以下两种方式实现：

1. 使用微信官方API加载字体

通过wx.loadFontFace动态加载网络字体文件（需支持HTTPS且域名需在白名单中）。

wx.loadFontFace({
  family: 'cl', // 自定义字体名称
  source: 'https://at.alicdn.com/t/webfont_1f7b3qbimiv.eot', // 字体文件地址
  success: function(res) {
    console.log('字体加载成功', res);
  },
  fail: function(err) {
    console.log('字体加载失败', err);
  }
});

加载完成后，可在WXML文件中通过style属性应用：

<view class="custom-font">自定义字体内容</view>

对应的CSS样式：

.custom-font {
  font-family: "cl", sans-serif;
  font-size: 34rpx;
}

2. 使用本地字体文件

将字体文件（.ttf或.woff）放入项目目录，通过相对路径引入。

1. 在app.wxss或页面的局部样式表中定义字体：

@font-face {
  font-family: 'cl';
  src: url('/fonts/cl.TTF') format('truetype');
}

.custom-font {
  font-family: 'cl', sans-serif;
  font-size: 34rpx;
}

2. 在WXML文件中应用样式：

<view class="custom-font">自定义字体内容</view>

注意事项

• 自定义字体需在所有使用场景中保持一致，建议通过全局样式表统一管理；

• 动态加载字体时需处理加载失败的情况，避免影响页面显示。

通过以上方法，可灵活实现微信小程序的字体设计与优化。