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

本文主要是介绍谈一谈 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

实际效果：