谈一谈 html文字小于12px的完美实现

首先我们以

 .content {
  	width: 150px;
  	height: 150px;
  	border: 1px solid red;
  	margin: 0 auto;
    text-align: center;
  }
  .content p {
  	font-size: 10px;
  }

<div class="content">
    <p>测试测试测试测试十二个字</p>
	<p>测试测试测试测试测试十四个字</p>
</div>

运行代码是这样的：

 当然我们都知道，chrome是不支持12px以下的中文的，这个属性-webkit-text-size-adjust也已失效，

当然我们的解决方法是 scale

   transform:scale(0.875);
   font-size: 12px;

但是我们会发现  文字所在的容器容器也跟着缩小了！！样式没有任何变化，这显然不是我们想要的，我们需要居中，接下来，我们给其 添加一个属性！ postion: absolute;  !!!!!  再通过left top 等来调节

 p:last-child{
    position: absolute;
      left: 45%
  }

效果：

transform-origin 属性有时候可以帮助你缩小元素后左对齐，居中等操作

当然 还有一种更高级的用法！！！ svg标签你敢信！

无意中看到了张鑫旭大大的文章！

https://www.zhangxinxu.com/wordpress/2018/03/svg-text-font-size-auto-scale/ 解释： SVG由于是矢量的，因此，再怎么拉伸我们的文字效果都是清晰细腻的

div class="content">
	<svg width="150" height="14" viewBox="0 0 150 14">
    <text font-family="'PingFang SC','Microsoft Yahei'" font-size="10" x="4" y="1em" fill="#cd0000">测试测试测试测试测试十四个字</text>
    </svg>
</div

实际效果：  

理解svg属性的话，可以参考：https://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/

如果有错误或者不严谨的地方，请务必给予指正，十分感谢！