另辟蹊径解决浏览器无法把字号设置在12px以下的问题

当我们在开发网页的时候，有时候需要展示很小的文字，但当我们把font-size设置到12px以下的时候，其实是不会生效的。怎么解决这个问题呢？下面是鄙人提供的一个小方面，应该不是最佳实践，仅供参考。
先看下DOM结构：

<span class="text">Hello World</span>

css:

.text {
  font-size: 20px;
  display: inline-block;
}

现在的效果：

方法就是利用css的transform属性对元素的缩放效果来实现，假定我们需要展示10px的字号，但是现在是20px，我们只需要缩放到原来的一半即可：

.text {
  ...
  transform: scale(.5);
}

为了让效果看起来明显一点，我们在外面再包裹一层span，这样它的大小会被里面的内容撑开，再给它加个背景色：

<span class="box">
    <span class="text">Hello World</span>
</span>

可以看到，缩小到原来的一半后，效果不是很好：

字号确实是10px了，但是它占据的空间仍然是原来的大小。
实现最终效果的方法就是，先把transform的变形原点改为左上角：

.text {
  ...
  transform: scale(0.5);
  transform-origin: left top;
}

然后想办法获取到内层存放文本的span缩小之后的宽高，把外层span的宽高设置成一样即可。可能这时很多人会想起window.getComputedStyle()这个api，但是很抱歉它拿到的宽高值仍然是缩小之前的。

我们需要用到dom元素自带的一个方法，请看下面的代码：

const text = document.querySelector('.text');
const bcr = text.getBoundingClientRect();
console.log(bcr);

这个对象上的宽高就是缩小了之后的，接下来就是用这个宽高与缩小比例相乘得到最终的宽高，将最终的宽高设置到外层span上即可。