字体大小设置

基础库 3.200.1 开始支持。

小程序中字体大小分为四个等级,分别是小、中、大和特大,默认情况下字体大小的等级为中。

# 字体大小的设置方式有如下三种

  • 在小程序中设置:小程序右上角的胶囊 - 字体大小,拖动滑块进行设置
  • 在百度 APP 中设置:百度 App - 我的 - 设置 - 字体大小,拖动滑块进行设置
  • 在百度 APP 搜索结果落地页中设置:落地页右上角的胶囊 - 字体大小,拖动滑块进行设置
    注意:不管通过上述方式的哪种方式进行设置,百度 APP 和小程序都会生效。

# 字体大小比例

默认字体大小的等级为中,对应缩放比例为 100%,小对应的缩放比例为 84%,大对应的缩放比例为 110%,特大对应的缩放比例为 121%。

# 适配方法

为了方便开发者适配用户字体大小的设置,我们提供了一组 css 类名,开发者可通过书写如下四种样式,对不同字体大小的设置进行适配。
其中,swan-text-size-adjust-1 对应于用户设置字体大小等级为小时的页面样式,swan-text-size-adjust-2 对应于用户设置字体大小等级为中时的样式(即默认样式),swan-text-size-adjust-3 对应于用户设置字体大小等级为大时的样式,swan-text-size-adjust-4 对应于用户设置字体大小等级为特大时的样式。

.swan-text-size-adjust-1 {
  /* 字体大小等级设置为小的样式 */
}
.swan-text-size-adjust-2 {
  /* 字体大小等级设置为中的样式 */
}
.swan-text-size-adjust-3 {
  /* 字体大小等级设置为大的样式 */
}
.swan-text-size-adjust-4 {
  /* 字体大小等级设置为大的样式 */
}

注意:

  • page 的 css 样式优先级高于 app.css 中样式的优先级,即如果同时在 page 的 css 和 app.css 写了适配样式,page 的 css 样式将覆盖掉 app.css 中的样式。
  • 如果不是做字体大小的适配,请不要使用 swan-text-size-adjust-1、swan-text-size-adjust-2、swan-text-size-adjust-3 和 swan-text-size-adjust-4 这四个类名书写 css 样式,否则,这些样式会被认为是字体大小的适配样式。

# 字体大小设置的获取

可通过调用 swan.getSystemInfoswan.getSystemInfoSync 获取 fontSizeSetting 即当前字体大小设置。

# 字体大小设置的禁用

如果不期望小程序响应字体大小设置,可通过配置 app.json 中 window 的 textSizeAdjust 属性为 none,实现对字体大小设置的禁用。

注意:

  • 禁用设置的对象:是针对当前小程序的,即为当前小程序设置了禁用,字体大小的设置只在当前小程序中不响应,在未设置禁用的小程序中和百度 APP 中仍然响应
  • 设置禁用后的表现:当前小程序中的字体大小面板可以拖动,只是当前小程序不生效,在未设置禁用的小程序中和百度 APP 中仍然生效