---
url: "https://pay.weixin.qq.com/doc/v3/partner/4013358769.md"
title: "H5收银台适老化字体规范"
doc_id: 4013358769
---

>更新时间：2024.12.24

## 1. 范围

本指引描述了微信支付商户使用H5页面作为收银台时，H5页面在微信内展示适配用户设置大字体的要求和指引。

本指引适用于微信支付商户、服务商收款产品中H5页面设计和实现。

## 2. 大字体介绍

为了响应国家对App适老化与无障碍改造的要求，为更多用户都能获得良好的微信体验，微信内支持设置页面字体放大功能，用户设置大号字体后，微信内的元素会按比例放大显示，H5网页中的文字或图片也会放大，所以需要做好大号字体页面适配。

### 用户微信端设置大号字体有两个方法

方法1： 在微信内通过进入“设置＞通用＞字体大小” 来调整字体大小，设置后，微信内的页面元素都会跟随放大，效果如图1所示。

方法2： 在阅读公众号文章时通过“右上角＞调整字体”来设置字体大小，设置后，微信公众号内的H5页面元素会跟随放大。

![](https://gtimg.wechatpay.cn/resource/xres/mmpaydoc/static/img/a63bbab52a234c5f4c4f6978a38d462c.jfif)

图1：如何设置大字体

## 3. 未做适配的收银页面案例

现有商户H5收银页面未做适配大字体时会出现信息溢出、遮挡、重叠等情况，严重影响了用户的阅读和操作，应避免以下几类情况发生。

### 3.1.页面元素溢出

![](https://gtimg.wechatpay.cn/resource/xres/mmpaydoc/static/img/4d26bdd9c0019c6691bebb0c24df0836.jfif)

图2：页面展示文字溢出

解决方案： 信息过大导致的溢出，可通过限制字数、设置该元素不跟随放大（见[限制页面元素不放大](https://pay.weixin.qq.com/doc/v3/partner/4013358769.md#4.6.%E9%99%90%E5%88%B6%E9%A1%B5%E9%9D%A2%E5%85%83%E7%B4%A0%E4%B8%8D%E6%94%BE%E5%A4%A7)）来解决。

### 3.2.信息重叠

![](https://gtimg.wechatpay.cn/resource/xres/mmpaydoc/static/img/1a10110233499fca704d1dd1b9e0cc95.jfif)

图3：页面展示文字重叠

解决方案： 元素样式避免使用绝对高度，请使用相对单位或不设置高度。

### 3.3.信息遮挡

![](https://gtimg.wechatpay.cn/resource/xres/mmpaydoc/static/img/fca196b6c0603514939e3adcdc2a71d4.jfif)

图4：页面文字被键盘遮挡

解决方案： 信息被键盘、按钮遮挡的情况，开发者可检查页面样式，避免使用100%高度，保证字体放大后页面可滚动浏览。

## 4. 页面适配内容和实现指引

为了给用户提供更好的使用体验，避免页面字体放大后出现信息溢出、重叠、遮挡等情况，要求开发者、设计师按如下6类指引做好页面适配。

### 4.1.哪些元素需要放大

默认情况下，包括文字，图标，图片，容器（cell、卡片），组件等页面中的所有元素都要跟随规则进行缩放。

当页面中的文字信息足够大（大于或等于40dp/pt），为了避免信息过大导致的溢出，设计师可以根据页面具体情况允许该文字信息不进行放大，从而避免不必要的放大。

设计师可根据页面具体情况，为该页面设置最大放大档位（针对用户侧设置字号的档位，例如安卓有8档，苹果iOS有6档），以实现更合理的页面展示效果。

![](https://gtimg.wechatpay.cn/resource/xres/mmpaydoc/static/img/1101e600d74dbd891691b23c3c32281f.jfif)

图5：页面字体进行放大说明

### 4.2.换行

内容过多时可通过让文本信息换行的方式，避免信息被截断、重叠等情况，以保证信息展示完整。

![](https://gtimg.wechatpay.cn/resource/xres/mmpaydoc/static/img/75df28679c5df07173c7db6841014e62.jfif)

图6：页面字体放大换行展示

### 4.3.页面滚动

空间不充足时，需支持页面上下滚动，以保证信息不被按钮、键盘或其他元素遮挡。

![](https://gtimg.wechatpay.cn/resource/xres/mmpaydoc/static/img/91cb887e1d1fd2fc0bab9e9aede8191c.jfif)

图7：页面字体放大后支持滚动条

### 4.4.间距

为了确保用户的阅读效率，我们推荐页面中的间距不随大字体模式进行缩放。当元素之间的间距不足以分隔信息，或者页面有足够的适配空间时，可以考虑放大间距。为了更有效地实现这一效果，我们建议开发者在开发过程中，使用绝对单位来设置间距样式，以防止间距随字体大小的变化而发生变化。

![](https://gtimg.wechatpay.cn/resource/xres/mmpaydoc/static/img/96e12798101da407b291eeb2fd8eaf30.jfif)

图8：页面字体放大后间距设置

### 4.5.拥挤情况

当文字信息过多时，放大后容易出现重叠或被截断的情况，此时应预留好内容之间的安全距离，内容过多需要换行，容器高度也相对延伸，调整内容与容器水平居中对齐。原则如下：

![](https://gtimg.wechatpay.cn/resource/xres/mmpaydoc/static/img/cca49f60882a675e2381c3fe98169999.jfif)

图9：页面字体放大后拥挤情况对比

### 4.6.限制页面元素不放大

当页面中的文字信息足够大，为了避免信息过大导致溢出，设计师可以根据页面具体情况设置该文字信息不进行放大。实现页面部分元素不跟随放大，开发者需按以下3个步骤操作：

步骤1： 禁止微信内网页字体大小默认缩放（Android、iOS设置方式不一样，详见代码示例中的备注1-1、1-2）。

步骤2： 监听微信网页字体大小的事件menu:setfont，获取当前设置的字体大小信息。

步骤3： 为不同的信息元素设置指定样式。

代码示例如下：

```
<script>
// 微信网页字体大小自定义适配 Demo
document.addEventListener("WeixinJSBridgeReady", function (params) {
    // 1-1.设置禁止 Android 微信内网页字体大小默认缩放
    WeixinJSBridge.invoke("setFontSizeCallback", {
        fontSize: '2' // 默认档位 2
    });
    // 2.监听网页字体大小的事件，页面加载完成或用户手动修改字号会触发该事件
    WeixinJSBridge.on('menu:setfont', function (e) { // e.fontSize 档位  e.fontScale 放大比例
        // 3-1.业务逻辑
        // rem方式，根据档位或放大比例设置根字号大小
        // 非rem方式，根据档位或放大比例设置根节点命名空间className（如：wechat_fontsize_6）
    });
}, false);
</script>
<style>
/* 1-2.设置禁止 iOS 微信内网页字体大小默认缩放 */
body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}
/* 3-2.业务逻辑 */
.wechat_fontsize_6 .title { }
</style>
```

## 5. 验收要求

商户发布收银H5页面前， 需要做实际环境的测试和验收。

具体验收要求：在iOS手机和Android手机上分别进行验收，建议验收时考虑到最小机型的效果，如iPhone SE，安卓小屏机。在手机设置大字体后（方法见[设置大号字体方法](https://pay.weixin.qq.com/doc/v3/partner/4013358769.md#%E7%94%A8%E6%88%B7%E5%BE%AE%E4%BF%A1%E7%AB%AF%E8%AE%BE%E7%BD%AE%E5%A4%A7%E5%8F%B7%E5%AD%97%E4%BD%93%E6%9C%89%E4%B8%A4%E4%B8%AA%E6%96%B9%E6%B3%95)），H5网页展示效果符合上文要求后才能上线。

适配后，开发者需要自查以下3点：

- 页面中的文字、图片、按钮等元素均放大。

- 页面中文字、图片、按钮等元素没有出现信息溢出、被遮挡、重叠等情况。

- 将字体大小调整到第6档位时，保证页面主要文字信息最小不小于18dp/pt。


![](https://gtimg.wechatpay.cn/resource/xres/mmpaydoc/static/img/664cf829ab12e7ded0cae819a291ab46.jfif)