[點(diǎn)晴永久免費(fèi)OA]設(shè)置谷歌瀏覽器顯示小于12px以下字體的三種方法
使用場(chǎng)景：以往設(shè)計(jì)圖給的字號(hào)一般最小就是14px， 開發(fā)人員一般是使用谷歌瀏覽器來進(jìn)行調(diào)試運(yùn)行。 問題描述
了解一點(diǎn)開發(fā)的人都知道，谷歌瀏覽器顯示的最小字號(hào)就是14px，即使你設(shè)定的字體為10px，默認(rèn)顯示的也是14px，當(dāng)然除了谷歌之外，新出的Edge瀏覽器也有同樣的問題，主要原因還是因?yàn)閮?nèi)核使用的是同一個(gè)，常用的瀏覽器除了這兩個(gè)之外，其實(shí)IE、火狐瀏覽器、移動(dòng)端等小于14px的字號(hào)大小還是可以正常顯示的。下圖是我自己做的一個(gè)實(shí)驗(yàn)，結(jié)果如圖所示：
試想若是全篇文字8px大小，閱讀的時(shí)候得有多費(fèi)眼睛，估計(jì)大多數(shù)人看到這么小的字體之后，都會(huì)自覺放大頁面也去看吧？其實(shí)最小字號(hào)14px只是谷歌瀏覽器的一個(gè)默認(rèn)的基礎(chǔ)值設(shè)定，只是為了不影響正常閱讀而已，既然是設(shè)定值，那理所當(dāng)然是可以更改的。 解決方案一：
步驟：
在這之前有人說使用-webkit-text-size-adjust: none;解除字號(hào)限制，不過不知道為啥，我看著頁面并沒有效果，可能是現(xiàn)在已經(jīng)廢除了這種寫法。 解決方案二：
步驟：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 300px;
height: 30px;
margin-bottom: 5px;
background: rgb(206, 151, 151);
}
.box1 {
font-size: 14px;
}
.box2 {
font-size: 10px;
transform: scale(0.83333);
transform-origin: 0 0;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="box1">我是正常的14px的文字大小 Hello world!</div>
<div class="box1">我是正常的14px的文字大小 Hello world!</div>
<div class="box2">我是正常的10px的文字大小 Hello world!</div>
<div class="box2">我是正常的10px的文字大小 Hello world!</div>
</body>
</html>
解決方案三：
步驟：
該方法是可以設(shè)置任意字號(hào)大小，還能根據(jù)設(shè)計(jì)圖的需要進(jìn)行對(duì)齊調(diào)整，但svg沒有換行符！??！所以文本并不支持換行顯示，即使你設(shè)置的svg的寬高足夠大，即使設(shè)置文本可以換行white-space: pre;也沒有任何效果。 也就是說，svg默認(rèn)所有單個(gè)或連續(xù)多個(gè)空格、換行符等轉(zhuǎn)為一個(gè)空格來顯示。 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{font-size: 14px;}
svg{width: 100px;height: 100px;background-color: chocolate;}
svg text {font-size: 8px;}
</style>
</head>
<body>
<div>我是最小14px字體大小 hello world！</div>
<svg>
<!-- svg是矢量圖的概念方法，這里的文本并不支持換行顯示，即使你設(shè)置的svg的寬高足夠大 -->
<!-- text文本設(shè)置樣式的方法和普通標(biāo)簽設(shè)置的方法不一樣，例如文本顏色填充是用fill設(shè)置，并不是color -->
<text x="0" y="8" >我是10px字體大小 hello world！</text>>
</svg>
</body>
</html>
該文章在 2023/6/5 16:42:44 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
