How to set font-size smaller than 12px at chrome

一般來說
在 chrome 開啟，font-size 是無法低於12px
這件事一直懊惱著部分手機版的視覺

Use text-size-adjust

解決方法（一）
在css上使用-webkit-text-size-adjust: none
text-size-adjust:CDN
但是可以發現似乎 chrome 27 的版本以及safari 6的版本會不支援了！

Use transform

解決方法（二）

1

transform:scale(參數);

所以你要怎麼控制他？

1.先知道現在這個文字上 font-size 為多少？ 舉例:12px
2.計算你想做多少 px 的字體？ 舉例:8px

所以我就會以12px字體去做縮放8px
8/12=0.6666666

1
2
3
4

.blog-name {
  font-size:12px;
    -webkit-transform:scale(0.66);
}

Bad meothed

這時你會發現，字數不同，縮放後位置也不同！
沒錯，因為字體縮放會因為本來8個字的12px寬
而去做縮小，那這樣當然露出左邊的間隔
那當然9個字的寬就又不同啦！

這時身為一個專業切版，你會很容易地使用….

1
2
3
4
5

display:inline-block;
position:absolute;
left: -4px;
or 
margin-left: -4px

Use transform-origin-x

但是我介紹一個更屌的，一行解決你對齊的困擾
-webkit-transform-origin-x: 0%;
可以去玩看看囉！

說到這！提醒補充一件事
情境下，我要將某個框框內設定一行只有5個字
那我們就得在還未縮放之下，確保到會跳下一行
之後再去做縮放喔！才不會在那邊微調，還沒調到你要的fu~