解決方案

讓指定文字使用自定義的class，如forcefontsize10

<a>                                         
    Products
    <sup class="forcefontsize10">
        88
    </sup>
</a>

並在css中自定義以下類：

.forcefontsize10 {
    display: inline-block;
    font-size: 12px;
    -webkit-text-size-adjust:none;
    -webkit-transform : scale(0.83,0.83);
}
 
.forcefontsize8 {
    display: inline-block;
    font-size: 12px;
    -webkit-text-size-adjust:none;
    -webkit-transform : scale(0.66,0.66);
}
 
.forcefontsize6 {
    display: inline-block;
    font-size: 12px;
    -webkit-text-size-adjust:none;
    -webkit-transform : scale(0.5,0.5);
}
 

Chrome效果圖

重點

1. CSS規則“-webkit-text-size-adjust:none;”針對版本為27以前的chrome可自定義小於12畫素的大小；

2.Chrome更新到27版本就不支援“-webkit-text-size-adjust:none;”了，需要使用CSS3的新規則：“-webkit-transform : scale(0.83,0.83);”，縮放指定dom，但必須是block級

3.CSS規則“display: inline-block;” 可允許指定文字不需要變成Block的獨立一行，實現行內的小字型顯示

他山之石

font-size<12 chrome不支援解決 今天，群裡有人問道font-size<12 chrome不支援的問題。說實話，這個我一直都沒留意過，正好借個機會給自己補習一下。 自己親自試過，確實如此，當font-size<12 chrome都當12px處理了，據說以前有個屬性可以用，不過已經淘汰不支援了，也無法驗證，那這裡就不說了。這裡用的方法是用css3的新屬性：transform:scale();來達到對文字進行縮放，但是注意，他會對做用的元素進行整體縮放，而這不是我們所希望的，因為我們只是想單獨縮放字型，所以採取一些措施：就是用一個標籤把需要縮放的文字包起來，然後單獨對他新增transform:scale();避免對其他元素影響。

如果單單是想要設定頁面的font-size屬性值小於12px，貌似是一個很簡單、很正常、對於有這個需求的開發者理所當然的事情。 在chrome瀏覽器下，當設定font-size屬性值小於12px時是無效的，當然網上很多地方也有解決辦法，那就是使用“-webkit-text-size-adjust”。有的時候即使設定了這個屬性在chrome裡仍然有問題，網上也有一些論壇討論作參考。 不過，退一萬步講，即使技術問題解決了，真的將font-size屬性值設定到了12px一下來顯示字型，這在瀏覽器的都是非常小的字型了，正常人開著都很困難，對視力障礙者來說就更是不方便了。所以，最好的解決這個問題的辦法應該是，儘量不設定小於12px的屬性值。