字体属性设置（一）：谷歌浏览器12px以下字体的显示；方法和原理

来源：互联网发布：scratch软件下载编辑：程序博客网时间：2024/06/04 19:12

字体属性设置（一）：谷歌浏览器12px以下字体的显示；方法和原理

前言：

chrome

谷歌浏览器默认的字体大小为16px；可以通过设置font-size来设置字体大小但是当设置到12px以下的时候字体大小不再改变；对于想设置其他大小的字体就很头疼，本文参考网上的方法，并对该方法以及原理介绍；并对该方法的弊端进行阐述并提出一种合适的解决办法

1.适用对象：

block 或者inline-block类型;

2.方法(该方法先以p标签举例)：

方法：通过设置transform：scale();

局限性：标签会发生移动(可以参考下面的代码和图片)；

解决办法：设置transform-origin；

   <!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <style media="screen">    *{      margin: 0;      padding: 0;    }    </style>  </head>  <body>    <p>      我是p    </p>  </body></html>

可以发现默认的是16px；

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

可以发现当设置0.8的缩放比例的时候；得到的字体大小:16pxX 0.8 = 12.8px

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

当在p中设置font-size:10px的时候比例缩放就以10px进行缩放;

(可以看到设置缩放之后标签发生移动，这个在下面会说到解决办法）

p中所有的元素都按照p的缩放比例进行缩放；

3.原理:

<!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本身设置宽高以及边框；设置scale0.8，p标签自动上下居中(自身原来的宽高-缩放后的宽高得到的宽高平均分配到上下左右)；

用chrome自带的盒模型发现，p标签内容占据宽度依旧是300px X 300px；

当在p后面（div中）加入span元素发现span出了div的范围，说明等比缩放只是改变的原来标签形式上的大小；其原来所在文档流占据的空间位置并未因缩放而腾出来;

发现改变p的位置之后span仍然被挤出来。

该方法原理及总结:

1.设置scale时时对整个p标签进行缩放(包含p本身及其内容的所有元素)，而不单单是对字体的缩放；

2.进行缩放之后会将缩放之前的宽高-缩放之后的宽高的值自动分配到p标签的上下左右；但缩放并不会改变该标签原来在文档流中所占据的位置大小；不会因为缩放而腾出空间；

3.缩放后，缩放对象的位置会发生变化；

4.也是scale不适用于inline类型元素的原因(不能设置宽高；虽然自己的宽高靠内容撑起来;但是在设置css的时候无法获取宽高的准确信息(我是这么理解))；所以如果想要设置inline类型的font-size需要先设置display：block或者inline-block。

4.解决办法(解决偏移问题)：

<!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>    </div>  </body></html>

在缩放对象上加入：

-webkit-transform-origin: 0 0;

或者

-webkit-transform-origin-x: 0;

-webkit-transform-origin-y: 0;

阅读全文

0 0