移动端小于12px 字体解决方案

最新推荐文章于 2023-06-17 18:09:52 发布

A_one2010

最新推荐文章于 2023-06-17 18:09:52 发布

阅读量3k

点赞数 1

分类专栏： HTML CSS 文章标签：字体缩放

本文链接：https://blog.csdn.net/A_one2010/article/details/105832105

版权

HTML 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

CSS

15 篇文章 0 订阅

订阅专栏

随着h5 的兴起，设计的五花八门，页面存在许多小号字体。但移动端对小于12px的支持度不一，详见下面测试。

https://www.cnblogs.com/he-lian/p/4512276.html?_t_t_t=0.47901571358823203

那么我们如何在特定区域展示小号字体呢。首先想到的方案就是缩放，使用 transform: scale(0.5)，使用transform确实可以缩小。但是transform缩放也存在问题。 1，scale会整体缩放，这样会造成块级元素也缩小，造成比例不协调。2，缩放默认以中心点缩放，缩放后整体剧中，造成ui不协调。

针对以上问题，我们相应解决，1，scale整体缩放，我们扩展缩放元素的宽度，扩展比例为缩放的倒数。2，调整缩放中心点为左上角点。这样缩放后的从ui上来看就是只缩放了字体。

这样也会存在问题，在有定位的时候，扩展比例也同样会占据空间，造成页面超出。此时我们需要给父级元素添加超出隐藏即可。

下面为案例代码，感兴趣的可以自己试试。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>字体缩放</title>
</head>
<body>

<div class="test-box">
	<div class="title">这里是title，14号字体。</div>
	<div class="content">这里继承了14号字体，使用缩放进行缩放了一半，相当于7号字体了。那么字体呈现出来的大小是多少呢，我们拭目以待，那么字体呈现出来的大小是多少呢，我们拭目以待，那么字体呈现出来的大小是多少呢，我们拭目以待</div>
</div>
</body>
<style>
	.test-box{
		position: relative;
		width: 100%;
		font-size: 14px;
	}
	.title{
		
	}
	.content{
		transform: scale(.5);
		display: inline-block;
		width: 200%;
		transform-origin:0 0 ; 
	}
</style>
</html>

A_one2010

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
移动端小于12px 字体解决方案

随着h5 的兴起，设计的五花八门，页面存在许多小号字体。但移动端对小于12px的支持度不一，详见下面测试。https://www.cnblogs.com/he-lian/p/4512276.html?_t_t_t=0.47901571358823203 那么我们如何在特定区域展示小号字体呢。首先想到的方案就是缩放，使用 transform: scale(0.5)，使用trans...
复制链接

扫一扫