codecamp

百度智能小程序 字体大小设置

基础库 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.getSystemInfo 或 swan.getSystemInfoSync 获取 fontSizeSetting 即当前字体大小设置。

字体大小设置的禁用

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

注意:

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


百度智能小程序 使用动态库
百度智能小程序 兼容性说明
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

百度智能小程序开发文档

百度智能小程序 组件

百度智能小程序 地图

百度智能小程序 画布

百度智能小程序 API

百度智能小程序 界面

百度智能小程序 关注小程序引导组件

百度智能小程序 自定义组件

百度智能小程序 媒体

百度智能小程序 设备

百度智能小程序 拨打电话

百度智能小程序 内存警报

百度智能小程序 手机联系人

百度智能小程序 用户截屏事件

百度智能小程序 第三方平台

百度智能小程序 开放接口

百度智能小程序 百度收银支付

百度智能小程序 分包预下载

百度智能小程序 数据分析

百度智能小程序 服务端

百度智能小程序 云开发

百度智能小程序 初始化

百度智能小程序 云函数

百度智能小程序 服务端初始化

百度智能小程序 服务器获取上下文

百度智能小程序 服务端云函数

百度智能小程序 开发教程

百度智能小程序 功能开发

百度智能小程序 基本原理

百度智能小程序 小程序自动化

百度智能小程序 视频教程

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }