今天给大家分享的是 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 部分
<script>
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>