[点晴永久免费OA]设置谷歌浏览器显示小于12px以下字体的三种方法
当前位置：点晴教程→点晴OA办公管理信息系统
→『 经验分享&问题答疑 』
使用场景：以往设计图给的字号一般最小就是14px， 开发人员一般是使用谷歌浏览器来进行调试运行。 问题描述
了解一点开发的人都知道，谷歌浏览器显示的最小字号就是14px，即使你设定的字体为10px，默认显示的也是14px，当然除了谷歌之外，新出的Edge浏览器也有同样的问题，主要原因还是因为内核使用的是同一个，常用的浏览器除了这两个之外，其实IE、火狐浏览器、移动端等小于14px的字号大小还是可以正常显示的。下图是我自己做的一个实验，结果如图所示：
试想若是全篇文字8px大小，阅读的时候得有多费眼睛，估计大多数人看到这么小的字体之后，都会自觉放大页面也去看吧？其实最小字号14px只是谷歌浏览器的一个默认的基础值设定，只是为了不影响正常阅读而已，既然是设定值，那理所当然是可以更改的。 解决方案一：
步骤：
在这之前有人说使用-webkit-text-size-adjust: none;解除字号限制，不过不知道为啥，我看着页面并没有效果，可能是现在已经废除了这种写法。 解决方案二：
步骤：
<!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没有换行符！！！所以文本并不支持换行显示，即使你设置的svg的宽高足够大，即使设置文本可以换行white-space: pre;也没有任何效果。 也就是说，svg默认所有单个或连续多个空格、换行符等转为一个空格来显示。 <!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是矢量图的概念方法，这里的文本并不支持换行显示，即使你设置的svg的宽高足够大 -->
<!-- text文本设置样式的方法和普通标签设置的方法不一样，例如文本颜色填充是用fill设置，并不是color -->
<text x="0" y="8" >我是10px字体大小 hello world！</text>>
</svg>
</body>
</html>
该文章在 2023/6/5 16:42:44 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
