一、背景
Chrome 中文版瀏覽器會默認設定頁面的最小字號是12px，英文版沒有限制
原由 Chrome 團隊認為漢字小于12px就會增加識別難度
中文版瀏覽器
與網(wǎng)頁語言無關，取決于用戶在Chrome的設置里（chrome://settings/languages）把哪種語言設置為默認顯示語言
系統(tǒng)級最小字號
瀏覽器默認設定頁面的最小字號，用戶可以前往 chrome://settings/fonts 根據(jù)需求更改
而我們在實際項目中，不能奢求用戶更改瀏覽器設置
對于文本需要以更小的字號來顯示，就需要用到一些小技巧
二、解決方案
常見的解決方案有：
- zoom
- webkit-transform:scale()
- -webkit-text-size-adjust:none
Zoom
zoom 的字面意思是“變焦”，可以改變頁面上元素的尺寸，屬于真實尺寸
其支持的值類型有：
- zoom:50%，表示縮小到原來的一半
- zoom:0.5，表示縮小到原來的一半
使用 zoom 來”支持“ 12px 以下的字體
代碼如下：
<style type="text/css">
.span1{
font-size: 12px;
display: inline-block;
zoom: 0.8;
}
.span2{
display: inline-block;
font-size: 12px;
}
</style>
<body>
<span class="span1">測試10px</span>
<span class="span2">測試12px</span>
</body>
效果如下：
需要注意的是，Zoom 并不是標準屬性，需要考慮其兼容性
-webkit-transform:scale()
針對chrome瀏覽器,加webkit前綴，用transform:scale()這個屬性進行放縮
注意的是，使用scale屬性只對可以定義寬高的元素生效，所以，下面代碼中將span元素轉為行內(nèi)塊元素
實現(xiàn)代碼如下：
<style type="text/css">
.span1{
font-size: 12px;
display: inline-block;
-webkit-transform:scale(0.8);
}
.span2{
display: inline-block;
font-size: 12px;
}
</style>
<body>
<span class="span1">測試10px</span>
<span class="span2">測試12px</span>
</body>
效果如下：
-webkit-text-size-adjust:none
該屬性用來設定文字大小是否根據(jù)設備(瀏覽器)來自動調(diào)整顯示大小
屬性值：
- percentage：字體顯示的大?。?/li>
- auto：默認，字體大小會根據(jù)設備/瀏覽器來自動調(diào)整；
- none:字體大小不會自動調(diào)整
html { -webkit-text-size-adjust: none; }
這樣設置之后會有一個問題，就是當你放大網(wǎng)頁時，一般情況下字體也會隨著變大，而設置了以上代碼后，字體只會顯示你當前設置的字體大小，不會隨著網(wǎng)頁放大而變大了
所以，我們不建議全局應用該屬性，而是單獨對某一屬性使用
需要注意的是，自從chrome 27之后，就取消了對這個屬性的支持。同時，該屬性只對英文、數(shù)字生效，對中文不生效
三、總結
Zoom 非標屬性，有兼容問題，縮放會改變了元素占據(jù)的空間大小，觸發(fā)重排
-webkit-transform:scale() 大部分現(xiàn)代瀏覽器支持，并且對英文、數(shù)字、中文也能夠生效，縮放不會改變了元素占據(jù)的空間大小，頁面布局不會發(fā)生變化文章來源：http://www.zghlxwxcb.cn/news/detail-552332.html
-webkit-text-size-adjust對谷歌瀏覽器有版本要求，在27之后，就取消了該屬性的支持，并且只對英文、數(shù)字生效文章來源地址http://www.zghlxwxcb.cn/news/detail-552332.html
到了這里，關于css基礎知識十九：讓Chrome支持小于12px 的文字方式有哪些？區(qū)別？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
