创新互联百度小程序教程:字体大小设置

  • 字体大小设置
    • 字体大小的设置方式
    • 字体大小比例
    • 适配方法
    • 字体大小设置的获取
    • 字体大小设置的禁用

    字体大小设置

    百度 App,从基础库 3.200.1 开始支持;开源宿主,从基础库 3.270.1 开始支持。

    陆河ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:18980820575(备注:SSL证书合作)期待与您的合作!

    以下字体大小的设置方式、字体大小比例和适配方法的部分只对百度 App 的情况进行介绍。在开源宿主 App 中,小程序的字体大小设置方式、字体大小比例均可自定义,开发者需要根据宿主自定义的具体情况进行适配。

    字体大小的设置方式

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

    • 在小程序中设置:小程序右上角的胶囊 - 字体大小,拖动滑块进行设置
    • 在百度 App 中设置:百度 App - 我的 - 设置 - 字体大小,拖动滑块进行设置
    • 在百度 App 搜索结果落地页中设置:落地页右上角的胶囊 - 字体大小,拖动滑块进行设置

    注意:不管通过上述方式的哪种方式进行设置,百度 App 和小程序都会生效。

    字体大小比例

    字体大小分为四个等级,分别是小、中、大和特大,默认情况下字体大小的等级为中,对应缩放比例为 100%,小对应的缩放比例为 84%,大对应的缩放比例为 110%,特大对应的缩放比例为 121%。

    适配方法

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

     
     
     
    1. .swan-text-size-adjust-1 {
    2. /* 字体大小等级设置为小的样式 */
    3. }
    4. .swan-text-size-adjust-2 {
    5. /* 字体大小等级设置为中的样式 */
    6. }
    7. .swan-text-size-adjust-3 {
    8. /* 字体大小等级设置为大的样式 */
    9. }
    10. .swan-text-size-adjust-4 {
    11. /* 字体大小等级设置为特大的样式 */
    12. }

    注意:

    • 上述适配方法仅适用于百度 App,在开源宿主 App 上,需要根据宿主定义的等级进行适配。
    • 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,实现对字体大小设置的禁用。

    注意:

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

    分享文章:创新互联百度小程序教程:字体大小设置
    浏览路径:http://www.shufengxianlan.com/qtweb/news8/50458.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联