&

[點(diǎn)晴永久免費(fèi)OA]設(shè)置谷歌瀏覽器顯示小于12px以下字體的三種方法

當(dāng)前位置：點(diǎn)晴教程→點(diǎn)晴OA辦公管理信息系統(tǒng) →『經(jīng)驗(yàn)分享&問(wèn)題答疑』

admin

2023年6月5日 16:41 本文熱度 2071

使用場(chǎng)景：

以往設(shè)計(jì)圖給的字號(hào)一般最小就是14px，開(kāi)發(fā)人員一般是使用谷歌瀏覽器來(lái)進(jìn)行調(diào)試運(yùn)行。
谷歌瀏覽器上顯示字體最小為14px，css設(shè)置font-size：10px，運(yùn)行代碼顯示結(jié)果仍然是14px大小，但是擋不住甲方有時(shí)就是強(qiáng)調(diào)使用的字號(hào)，必須是特別小的字號(hào)，就比如說(shuō)某些網(wǎng)站設(shè)計(jì)的噱頭–“買(mǎi)房送老婆”，但其實(shí)你不知道的是，在“老婆”兩個(gè)字之后，還有一個(gè)小到你需要用放大鏡去看的“餅”字，就問(wèn)你驚不驚喜，意不意外？

問(wèn)題描述

谷歌瀏覽器，以及最近將取代IE的Edge瀏覽器，顯示小于14px字號(hào)的解決辦法

了解一點(diǎn)開(kāi)發(fā)的人都知道，谷歌瀏覽器顯示的最小字號(hào)就是14px，即使你設(shè)定的字體為10px，默認(rèn)顯示的也是14px，當(dāng)然除了谷歌之外，新出的Edge瀏覽器也有同樣的問(wèn)題，主要原因還是因?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ì)自覺(jué)放大頁(yè)面也去看吧？其實(shí)最小字號(hào)14px只是谷歌瀏覽器的一個(gè)默認(rèn)的基礎(chǔ)值設(shè)定，只是為了不影響正常閱讀而已，既然是設(shè)定值，那理所當(dāng)然是可以更改的。

文章來(lái)源地址https://www.yii666.com/blog/405858.html

解決方案一：

更改谷歌瀏覽器的基礎(chǔ)設(shè)定14px值，用來(lái)解決開(kāi)發(fā)人員的調(diào)試問(wèn)題

步驟：

點(diǎn)開(kāi)瀏覽器右上角的三個(gè)點(diǎn)，點(diǎn)擊“設(shè)置”
選擇“外觀”，找到“自定義字體”，在自定義字體中找到“最小字號(hào)”，將最小字號(hào)的進(jìn)度條直接拉到最左邊，這就表示最小字號(hào)是多少由你說(shuō)了算。
如果你找不到自定義字體這個(gè)選項(xiàng)，你也可以直接在設(shè)置頁(yè)面最上面的搜索框里，直接輸入字號(hào)，回車(chē)，頁(yè)面會(huì)自動(dòng)篩選出相應(yīng)設(shè)置項(xiàng)，然后一樣修改就可以了。在這個(gè)頁(yè)面你可以看到，不僅可以修改默認(rèn)的最小字號(hào)，還可以修改默認(rèn)顯示的字號(hào)、字體樣式等
老版本的可能是在“顯示高級(jí)設(shè)置…”里，如果根據(jù)我的提示，你還是找不到，那我還是建議你更新瀏覽器版本吧。

在這之前有人說(shuō)使用-webkit-text-size-adjust: none;解除字號(hào)限制，不過(guò)不知道為啥，我看著頁(yè)面并沒(méi)有效果，可能是現(xiàn)在已經(jīng)廢除了這種寫(xiě)法。
第一種解決方法是讓開(kāi)發(fā)人員用來(lái)調(diào)試代碼，這樣可以更直觀的觀察，其他瀏覽器小于14px字號(hào)的顯示大小效果，因?yàn)槌斯雀琛dge之外，常用的瀏覽器字號(hào)是能正常顯示的。
但是這種方法并沒(méi)有解決谷歌瀏覽器在普通用戶(hù)頁(yè)面的顯示效果，接下來(lái)，我們使用第二種辦法。

解決方案二：

使用縮放transform:scale()，使用較為廣泛

優(yōu)點(diǎn)：?jiǎn)涡小⒍嘈形谋径伎墒褂?br style="box-sizing: border-box;"/>缺點(diǎn)：只是視覺(jué)效果變小，并不會(huì)改變盒子的實(shí)際占位，在對(duì)齊其他盒子時(shí)不太友好

步驟：

<div>文本</div>
文本嵌套塊標(biāo)簽，這是因?yàn)榭s放只對(duì)有寬高的標(biāo)簽有效，縮放的時(shí)候也是將標(biāo)簽一起縮放，而不僅僅是縮放文本，所以如果使用span等行內(nèi)標(biāo)簽時(shí)，還需要將行內(nèi)標(biāo)簽進(jìn)行元素轉(zhuǎn)換為塊元素（display:block;）
給文本設(shè)置字體14px，并設(shè)置縮放值為10/12=0.83333，也就是transform:scale(0.83)；如果要設(shè)置8px，那就是8/12=0.66666
transform-origin：0 0；
默認(rèn)縮放中心點(diǎn)是在盒子的正中心，所以如果我們需要文本左對(duì)齊，就需要改變中心點(diǎn)，也就是transform-origin：0 0；該值有兩個(gè)參數(shù)值，第一個(gè)是水平方位值，第二個(gè)是垂直方位值，對(duì)應(yīng)的如果需要右對(duì)齊、或者是有縮進(jìn)，那就改變對(duì)應(yīng)的參數(shù)值即可。
white-space: nowrap;
文本進(jìn)行縮放后，并不會(huì)改變其原來(lái)盒子的大小，只是視覺(jué)上改變了大小，也就是說(shuō)如果文本有換行的時(shí)候，它進(jìn)行縮放后仍然是折行顯示，這顯然不符合我們要求，所以我們還需要強(qiáng)制文本在一行顯示，也就是 white-space: nowrap;

<!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>

解決方案三：

使用SVG 矢量圖設(shè)置text
優(yōu)點(diǎn)： 1px-14px任意字號(hào)均可設(shè)置，可對(duì)設(shè)計(jì)界面進(jìn)行對(duì)齊調(diào)整
缺點(diǎn)：不支持多行文本

步驟：

在svg包含text標(biāo)簽，給svg設(shè)置寬高，文本內(nèi)容寫(xiě)在text標(biāo)簽中；
因?yàn)閟vg是矢量圖的概念，也就是說(shuō)svg其實(shí)是一個(gè)計(jì)計(jì)諶萁興醴擰Ｊ導(dǎo)實(shí)奈謀咀趾糯笮∮蓆ext標(biāo)簽設(shè)置生效，但內(nèi)容顯示多少要看svg設(shè)置的寬高是多少，超出區(qū)域外的內(nèi)容不會(huì)顯示。
text標(biāo)簽的x y值這里必須用到的；
text的x和y值默認(rèn)為0，x值表示文字左下角開(kāi)始的x坐標(biāo)；y值表示文字左下角開(kāi)始的y坐標(biāo)，一般文本顯示都是左對(duì)齊，所以x值為0，y值為字號(hào)大小。當(dāng)然，如果是右對(duì)齊或者居中對(duì)齊的x y的值則需要另外設(shè)置對(duì)應(yīng)的值。注意：x y的值是寫(xiě)在標(biāo)簽后面，并且無(wú)單位！
text文本設(shè)置樣式的方法和普通標(biāo)簽設(shè)置的方法不一樣，例如文本顏色填充是用fill設(shè)置，并不是color；如果需要文本縮進(jìn)，或者是距離頂部有多寬的間隙，需要使用dx和dy；
dx:文本在水平方向上移動(dòng)的像素大小
dy:文本在垂直方向上移動(dòng)的像素大小

該方法是可以設(shè)置任意字號(hào)大小，還能根據(jù)設(shè)計(jì)圖的需要進(jìn)行對(duì)齊調(diào)整，但svg沒(méi)有換行符！！！所以文本并不支持換行顯示，即使你設(shè)置的svg的寬高足夠大，即使設(shè)置文本可以換行white-space: pre;也沒(méi)有任何效果。也就是說(shuō)，svg默認(rèn)所有單個(gè)或連續(xù)多個(gè)空格、換行符等轉(zhuǎn)為一個(gè)空格來(lái)顯示。

<!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ò)

關(guān)鍵字查詢(xún)

相關(guān)文章

正在查詢(xún)...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專(zhuān)業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車(chē)隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類(lèi)企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷(xiāo)售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。