• 字体属性设置(一):谷歌浏览器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;
     
     
  • 相关阅读:
    初始化Winsock库
    memset与初始化
    老板不在,嚣张的正则
    教研室的下午,取快递的一天
    教研室的夜晚
    真不知道起什么名字了
    任性就是没长大咯
    难得起得早,难得周六上班
    工欲学其语,必先装软件
    151008-JS初级完成,PHP入门(变量常量等)-没假放了
  • 原文地址:https://www.cnblogs.com/hanhanhan/p/5719275.html
Copyright © 2020-2023  润新知