如何在chrome浏览器下设置12px以下的字体

来源：互联网发布：mt4外汇交易系统源码编辑：程序博客网时间：2024/05/21 10:30

chrome

chrome浏览器的默认字体大小是16px，它所能支持设置的最小字体大小是12px，也就是说，当你使用font-size属性设置到12px以下的时候字体大小不再改变。现在提供解决方案。

关键字：transform：scale()

适用对象：display属性为block/inline-block

代码1：

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <style media="screen">    *{        margin: 0;        padding: 0;      }    p{        font-size: 12px;        line-height:1em;    }    </style>  </head>  <body>    <p>我是P</p>  </body></html>

代码1效果图：
P标签

盒模型：
12pxP盒模型

当将p标签的font-size设置成10px的时候，会发现，p标签的高度依旧是12px，这说明，我们通过单独设置font-size并不能让字体大小小于12px
P标签

代码2：
以字体大小为16px举例子，先上个16px大小的字体图以方便对照
16px 字体图：

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <style media="screen">    *{        margin: 0;        padding: 0;      }    p{        font-size: 16px;        line-height:1em;        -webkit-transform: scale(0.8);        }    </style>  </head>  <body>    <p>我是P</p>  </body></html>

效果图：
这里写图片描述

盒模型图：
这里写图片描述

可以看到，字体明显变小了，且得到的字体大小:16px X 0.8 = 12.8px，但是这里有两点需要注意的。
第一点：字体变小了，但是p元素的盒模型（content）高度没有发生变化；这很好理解，这是因为transform 的所有属性都不改变页面元素的布局。

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <style media="screen">      *{        margin: 0;        padding: 0;      }      p{        width: 300px;        height: 300px;        -webkit-transform:scale(0.8);        border: 1px solid red;      }      .a{        width: 300px;        height: 300px;        border: 1px solid red;        margin-top: 10px;        margin-left: 10px;      }    </style>  </head>  <body>    <div class="a">      <p>        我是p      </p>    </div>  </body></html>

效果图：
这里写图片描述

p标签的盒模型：
这里写图片描述

当对p加父容器和对p本身设置宽高以及边框；设置scale(0.8)，p标签自动上下居中(自身原来的宽高-缩放后的宽高得到的宽高平均分配到上下左右)；

用chrome自带的盒模型发现，p标签内容占据宽度依旧是300px X 300px；
第二点：字体在变小的同时，p标签也发生了移动。
由上面的代码发现，scale() 缩小其实是以盒模型的中点为原点缩放的，因为这个原因，所以p标签在缩小后发生“移动”，解决方法也很简单，就是更改模型形变的原点，使用-webkit-transform-origin: 0 0; 将原点设为P标签得到左上角，这样子就能形变后发生“移动”的问题。

代码：

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <style media="screen">      *{        margin: 0;        padding: 0;      }      p{        width: 300px;        height: 300px;        -webkit-transform:scale(0.8);        /*设置形变原点*/        -webkit-transform-origin: 0 0;        border: 1px solid red;      }      .a{        width: 300px;        height: 300px;        border: 1px solid red;        margin-top: 10px;        margin-left: 10px;      }    </style>  </head>  <body>    <div class="a">      <p>        我是p      </p>      <span>我是p后面的span</span>    </div>  </body></html>

效果图：
这里写图片描述

总结：
当元素发生放大或者缩小的时候，子元素也会随着父元素的发生相应的形变。利用这一个特点，解决了chrome浏览器设置小于12px 的字体

阅读全文

1 0