小於12px的文字居中問題

2021-09-13 16:10:51 字數 1262 閱讀 2224

在pc端的chrome瀏覽器中，小於12畫素的字型仍然以12畫素顯示，即使是設定了-webkit-text-size-adjust: none;也好像沒什麼作用。經過實驗，發現如下兩種方式比較有用，各位看官可聽我細細道來。

方式一

使用transform:scale()

假如設計同學給你的字型大小是10px,你設定了font-size:10px，此時在pc中測試並不會看到效果；一種有用的方法是：

font-size: 12px //pc中chrome的最小字型


transform: scale(0.833333333);


height: 12px; //設計給的高度是10px


line-height: 12px;
這種方式是可以將字型縮小到將近10px，但是包裹字型的標籤(div,p)的寬度、高度甚至是margin等值都縮小了0.8333333，假如設計同學給你的div的高度是20px，現在為了能正確顯示20px的高度，你必須要將高度設定為(20/0.8333333)px，寬度和margin的值的設定也是這樣；要想讓其居中，也必須將line-height設定為(20/0.8333333)px；這種計算方式比較複雜，且這種方式可能會影響到文件流中其他元素的位置，於是就有了如下的方式二的產生。

方式二

方式二中有兩個比較重要的點：

（1）對於小於12px的字型，可先將其擴大二倍，然後使用transform縮小0.5倍

（2）在標籤的位置方面，可以給它乙個相對定位的父元素，此父元素的高度和寬度可按照設計圖設定，然後將它的定位設定為相對定位，並且使其位於父元素的中心（垂直水平都居中）

html結構如下：

我要垂直水平居中
css樣式：

.parent


child
parent和child的關係如下圖所示，其中parent相當於用來佔位，這樣縮放就不會影響到parent外面的父元素，因為進行縮放的是絕對定位的child，它不在文件流內，並不會影響到其他元素在文件流中的位置。

另外，附送兩個小tips

怎麼讓 Chrome 支援小於 12px 的文字？

在谷歌下 css 設定字型大小為 12px 及以下時，顯示都是一樣大小，都是預設 12px。解決辦法 1 可以使用 webkit 的核心的 webkit text size adjust 的私有 css 屬性來解決，只要加了 webkit text size adjust none 字型大小就不受限...

怎麼讓Chrome支援小於12px 的文字

1 用 如果是內容固定不變情況下,使用將小於 12px 文字內容切出做,這樣不影響相容也不影響美觀。2 使用 12px 及 12px 以上字型大小 為了相容各大主流瀏覽器,建議設計美工圖時候設定大於或等於 12px 的字型大小,如果是接單的這個時候就需要給客戶講解小於12px 瀏覽器不相容等事宜。3...

如何在谷歌設定小於12px的字型？

問題描述 頁面寬度有限的情況下顯示大資料，採用font size 8px來壓縮字型大小，版本 25.0.1547.66及以下版本的chrome瀏覽器沒有問題，後續版本的就不可以了 問題原因 webkit 所以當設定了小於12px的字型是無效的 歷史解決方案 經查詢以前大家經常用 webkit fon...