H5 如何突破 12px 限制 - 编程导航 | 一线开发者编程经验和技术实战分享

大家好，我是晨光，5 年前端开发，现在携程担任高级前端开发。今天给大家分享的是 H5 如何突破 12px 限制，实现更小的字体。

我们都知道，H5 上最小字体为 12px，如果想要更小的字体怎么实现呢？答案是可以采用缩放。

一、缩放的方法

css 中有很多方法可以实现缩放，例如 scale，zoom 等等

1、scale

scale 的使用方式为 transfrom: scale(0.83333) 但是使用 scale 会存在一个问题，就是内容会被缩放，但占位不会被缩放，原因是 scale 先布局后缩放，元素的布局不会发生变化

2、zoom

zoom 使用方式为 zoom: 0.5 元素的占位会随着内容的缩放而缩放，也就是会改变元素的真实空间大小，从而影响其他元素的布局

3、scale 和 zoom 的差异

zoom的缩放是相对于左上角的；而scale默认是居中缩放 zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制

二、缩放的性能

1、zoom

上面有提到，zoom 的缩放会影响整个页面的布局，也就只要页面上有一个元素有 zoom 属性，那么整个页面都会重新渲染，对于硬件不 ok 的手机，那么就会存在很大的性能开销，页面也会出现卡顿。

2、scale

scale 只在当前元素上重绘，缩放不会影响到其他元素，因此相对 zoom，性能开销小一些三、在 h5 上实现 10px 的字体

三、如何计算缩放的比例呢？

通过数值计算比值。例如想要实现 10px 的字体，可以通过 10/12 的比值，大致为 0.833333

10 是当前你想要的字体大小

12 是 web 端最小的字体阈值

假设没有缩放，那么设置 10px 的字体，最终也会展示为 12px

四、10px 字体实现

1、思路

首先设置文本的字体为 12px，也就是 h5 的最小字体；

然后通过设置 transfrom: scale(0.83333) 把字体缩小为 10px

字体缩小但字体占位没有缩小，所以采用负的 margin 实现正确的布局，至于需要负多少，需要通过实际的文本占位的宽度来计算。

2、 RN 代码

{

fontSize: sizeScale(12),

transform: [{ scale: 0.83333 }],

// textWidth 的大小需要通过 onLayout 时进行获取

marginHorizontal: -textWidth * 0.08

}

3、h5 代码

和上面方式一样，下方实现了一个 html5 的 demo，没有借助其他前端框架。贴一下重点的代码。

1）css 部分

.text {

font-size: 12px;

transform: scale(0.83333333);

}

2）js 部分

function domReady(fn) {

document.addEventListener('DOMContentLoaded', fn, false);

}

const changeTextMargin = () => {

const dom = document.getElementById('scale_text');

// 需要是负margin

const textWidth = - (dom.offsetWidth * 0.16) / 2

// 这里注意拼接 px单位

dom.style.marginLeft = `${textWidth}px`

}

domReady(changeTextMargin);

</script>

五、Demo 对比

12px 字体与 10px 字体对比如下图

假如 10px 字体不加负边距，展示如下，可以看到字体有一个居中的状态

本次的内容就这么多啦，你有收获的话，点个赞再走呗～