前情提要
我司的某个站点登录页迎来了一次样式上的迭代，设计师同学将一段说明文字的字体大小设置为了10px，期望开发同学能够实现。
实践
1.❌想当然地直接设置font-size:10px
结果： 不生效。
为什么不生效？
因为谷歌浏览器支持的最小字体是12px
2.灵光一闪⭐，用transform缩放，把原来的12px乘上0.833的倍数
a.❌直接搭配
结果： 不生效。
代码
<Typography.Text
style={{
fontSize: 12,
transform: 'scale(.833)',
}}
type="secondary"
>
登录视为您已同意第三方账号绑定协议、个人信息保护知情同意书
</Typography.Text>
b.❌想到了，谷歌浏览器内核，因此transform要加上-webkit前缀
(Tip：旧版的谷歌浏览器需要加，最新版的无需添加此前缀)
谷歌浏览器的内核是WebKit的一个分支，称为Blink。在早期，当Chrome浏览器还使用原始的WebKit作为其渲染引擎时，确实需要使用
-webkit-前缀来支持某些CSS属性，如transform。这是因为这些属性在当初还是实验性特性，或是WebKit特有的。
代码
<Typography.Text
style={{
fontSize: 12,
WebkitTransform: 'scale(.833)',
}}
type="secondary"
>
登录视为您已同意第三方账号绑定协议、个人信息保护知情同意书
</Typography.Text>
结果： 还是不生效
c.❌原来如此，块级元素里设置transform才会生效 
代码
<Typography.Text
style={{
fontSize: 12,
WebkitTransform: 'scale(.833)',
display: 'block',
}}
type="secondary"
>
登录视为您已同意第三方账号绑定协议、个人信息保护知情同意书
</Typography.Text>
问题
transform: scale是现代浏览器都支持的css元素，应该是首选，但它会引发一个问题，虽然可以缩小整体显示的内容，但是并没有引起重排，所以占据的实际空间没有缩小
图片对比
可以看到，上方的图2，哪怕字体是10px大小的，但是块级元素的宽度还是和12px大小的相同。 因此，有没有其他方式，既可以使显示内容缩放，又可以缩小占据的实际空间？
3.❌使用zoom
（我本来以为这是最优解，但是看了下MDN文档，发现这是不规范的一种解法😓）
代码
<Typography.Text
style={{
fontSize: 12,
zoom: '.833',
}}
type="secondary"
>
登录视为您已同意第三方账号绑定协议、个人信息保护知情同意书
</Typography.Text>
结果
可以看到，通过设置
zoom的方式，我们既实现了字体的缩放，也实现了所占空间的真实缩小。
延伸问题
为什么是使用12 * 0.833，而不是使用20 * 0.5去得到整数呢？
因为假设在某些场景zoom失效了，此时字体会使用设置的12px，在展示上不会有太大的影响
但是如果一开始设置的是20px，那么在展示上就会影响特别大,如下图所示：
