剛接到廣告公司出的設計稿,裡面很多內容均是12px以下得字型,現在來總結一下解決辦法,方便以後使用
1.使用png 但是會影響頁面響應速度
2.使用transform: scale(0.x);
注意此時文字容器 必須是可以設定寬高的,即display屬性 必須是inline-block或block
計算公式:12px * 0.75(縮放比例) = 9px
font-size: 9px;就會出現如圖效果 12px 和9px 的字型對比display: block;
transform: scale(0.75);
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
-o-transform: scale(0.75);
由於原理上還是放大縮小 所以字型位置可能會改變 這時候還要加乙個屬性
-webkit-transform-origin-x: 0;備註 ie7,ie8不相容
.font9
讓Chrome顯示12px以下的字型
一般情況下,chrome無法顯示12px以下的字型 凡是小於12px,均以12px來顯示。此時需要設定強制顯示,以顯示10px為例 以12px為單位,10px 12px 0.8333333333333334 在文字所在div等樣式中加入下式即可 webkit transform scale 0.83...
論低於 12px 字型處理方案
瀏覽器可渲染的最小字型大小為 12px,但設計圖上經常出現小於該值的字型。對於 11px 我往往就按 12px 處理了,可 9px 這樣的超小字號處理成 12px 絕對太不地道啊。大家可能都知道通過 transform scale n 能達到縮小字型的效果,但你沒有發現並非十分好用?第乙個例子 看到...
谷歌瀏覽器小字型處理方案即12px以下字型
谷歌程式設計客棧瀏覽器是不支援12px以下小字型的,可能是考慮到使用者體驗吧。複製www.cppcns.com 如下 webkit text size adjust none 程式設計客棧 但是,lwxom自chrome 27之後,就取消了對這個屬性的支援。我們還有其它辦法解決這個問題嗎?谷歌瀏覽器...