首先我們以

 .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%
  }

效果：

當然 還有一種更高階的用法！！！ 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
 

實際效果：  

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝！