您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)前端瀏覽器字體小于12px怎么辦,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
前言
最近做項目時,UI設(shè)計的字體10px,看效果圖時發(fā)現(xiàn)字體仍然蠻大,改變12px時字體還是那么大,改變到14px時,字體變大了,發(fā)現(xiàn)規(guī)律,才知道原來瀏覽器為了讓用戶字體看的清楚,最小設(shè)置為12px。怎么辦?設(shè)計就是10px?
最終實現(xiàn)的效果圖如下:
效果圖
效果圖
效果圖
百度時,各位網(wǎng)上大神說利用transform: scale(0.5)
可以滿足要求,具體使用時,發(fā)現(xiàn)把整個div寬高都縮放了,不滿足要求,
反過來想,可以把紅點和字放在兩個div上,紅點控制寬高,字體上的縮小用transform: scale就可以滿足需求了。
具體實現(xiàn)代碼如下:
<div v-if="cartNum>=1" class="cartData"> <div class="Num" v-if="cartNum>=1&&cartNum<=99">{{cartNum}}</div> <div class="Num" v-else-if="cartNum>99">99+</div> </div>
css部分:
.cartData{ height: .75rem; min-width: .75rem; border-radius: .375rem; background: red; color: white; text-align: center; line-height: .75rem; } .Num{ font-size: 20px; -webkit-transform: scale(0.5); }
上面字體就14*0.8 = 11.2px,可以根據(jù)需求做具體調(diào)整。
只這樣寫可不會兼容IE、FF哦,所以再給一個兼容性寫法:
.Num{ font-size: 14px; -webkit-transform: scale(0.8); } .Numsize-font{ font-size: 14*0.8px; }
注意:
transform:scale()
這個屬性只可以縮放可以定義寬高的元素,而行內(nèi)元素是沒有寬高的,我們可以加上一個display:inline-block;
關(guān)于“前端瀏覽器字體小于12px怎么辦”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。