使用场景:

以往设计图给的字号一般最小就是12px, 开发人员一般是使用谷歌浏览器来进行调试运行。
谷歌浏览器上显示字体最小为12px,css设置font-size:10px,运行代码显示结果仍然是12px大小,但是挡不住甲方有时就是强调使用的字号,必须是特别小的字号,就比如说某些网站设计的噱头–“买房送老婆”,但其实你不知道的是,在“老婆”两个字之后,还有一个小到你需要用放大镜去看的“”字,就问你惊不惊喜,意不意外?


问题描述

谷歌浏览器,以及最近将取代IE的Edge浏览器,显示小于12px字号的解决办法

了解一点开发的人都知道,谷歌浏览器显示的最小字号就是12px,即使你设定的字体为10px,默认显示的也是12px,当然除了谷歌之外,新出的Edge浏览器也有同样的问题,主要原因还是因为内核使用的是同一个,常用的浏览器除了这两个之外,其实IE、火狐浏览器、移动端等小于12px的字号大小还是可以正常显示的。下图是我自己做的一个实验,结果如图所示:

试想若是全篇文字8px大小,阅读的时候得有多费眼睛,估计大多数人看到这么小的字体之后,都会自觉放大页面也去看吧?其实最小字号12px只是谷歌浏览器的一个默认的基础值设定,只是为了不影响正常阅读而已,既然是设定值,那理所当然是可以更改的。

解决方案一:

更改谷歌浏览器的基础设定12px值,用来解决开发人员的调试问题

步骤:

  1. 点开浏览器右上角的三个点,点击“设置”
  2. 选择“外观”,找到“自定义字体”,在自定义字体中找到“最小字号”,将最小字号的进度条直接拉到最左边,这就表示最小字号是多少由你说了算。
  3. 如果你找不到自定义字体这个选项,你也可以直接在设置页面最上面的搜索框里,直接输入字号,回车,页面会自动筛选出相应设置项,然后一样修改就可以了。在这个页面你可以看到,不仅可以修改默认的最小字号,还可以修改默认显示的字号、字体样式等
  4. 老版本的可能是在“显示高级设置…”里,如果根据我的提示,你还是找不到,那我还是建议你更新浏览器版本吧。

    在这之前有人说使用-webkit-text-size-adjust: none;解除字号限制,不过不知道为啥,我看着页面并没有效果,可能是现在已经废除了这种写法。
    第一种解决方法是让开发人员用来调试代码,这样可以更直观的观察,其他浏览器小于12px字号的显示大小效果,因为除了谷歌、edge之外,常用的浏览器字号是能正常显示的。
    但是这种方法并没有解决谷歌浏览器在普通用户页面的显示效果,接下来,我们使用第二种办法。

解决方案二:

使用缩放transform:scale(),使用较为广泛

优点:单行、多行文本都可使用
缺点:只是视觉效果变小,并不会改变盒子的实际占位,在对齐其他盒子时不太友好

步骤:

  1. 文本
    文本嵌套块标签,这是因为缩放只对有宽高的标签有效,缩放的时候也是将标签一起缩放,而不仅仅是缩放文本,所以如果使用span等行内标签时,还需要将行内标签进行元素转换为块元素(display:block;)
  2. font-size:12px;
    给文本设置字体12px,并设置缩放值为10/12=0.83333,也就是transform:scale(0.83);如果要设置8px,那就是8/12=0.66666
  3. transform-origin:0 0;
    默认缩放中心点是在盒子的正中心,所以如果我们需要文本左对齐,就需要改变中心点,也就是transform-origin:0 0;该值有两个参数值,第一个是水平方位值,第二个是垂直方位值,对应的如果需要右对齐、或者是有缩进,那就改变对应的参数值即可。
  4. white-space: nowrap;
    文本进行缩放后,并不会改变其原来盒子的大小,只是视觉上改变了大小,也就是说如果文本有换行的时候,它进行缩放后仍然是折行显示,这显然不符合我们要求,所以我们还需要强制文本在一行显示,也就是 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: 12px;        }        .box2 {            font-size: 10px;            transform: scale(0.83333);            transform-origin: 0 0;            white-space: nowrap;        }    </style></head><body>    <div class="box1">我是正常的12px的文字大小 Hello world!</div>    <div class="box1">我是正常的12px的文字大小 Hello world!</div>    <div class="box2">我是正常的10px的文字大小 Hello world!</div>    <div class="box2">我是正常的10px的文字大小 Hello world!</div></body></html>

解决方案三:

使用SVG 矢量图设置text
优点: 1px-12px任意字号均可设置,可对设计界面进行对齐调整
缺点:不支持多行文本

步骤:

  1. 在svg包含text标签,给svg设置宽高,文本内容写在text标签中;
    因为svg是矢量图的概念,也就是说svg其实是一个图片,给图片内容进行缩放。实际的文本字号大小由text标签设置生效,但内容显示多少要看svg设置的宽高是多少,超出区域外的内容不会显示。

  2. text标签的x y值这里必须用到的;
    text的x和y值默认为0,x值表示文字左下角开始的x坐标;y值表示文字左下角开始的y坐标,一般文本显示都是左对齐,所以x值为0,y值为字号大小。当然,如果是右对齐或者居中对齐的x y的值则需要另外设置对应的值。注意:x y的值是写在标签后面,并且无单位!

  3. text文本设置样式的方法和普通标签设置的方法不一样,例如文本颜色填充是用fill设置,并不是color;如果需要文本缩进,或者是距离顶部有多宽的间隙,需要使用dx和dy;
    dx:文本在水平方向上移动的像素大小
    dy:文本在垂直方向上移动的像素大小

该方法是可以设置任意字号大小,还能根据设计图的需要进行对齐调整,但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: 12px;}    svg{width: 100px;height: 100px;background-color: chocolate;}    svg text {font-size: 8px;}  </style></head><body>  <div>我是最小12px字体大小 hello world!</div>  <svg>            <text x="0" y="8" >我是10px字体大小 hello world!</text>>  </svg></body></html>