前言：

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;
 
 

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

  1. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  2. 【xshell属性设置】如何修改xshell字体大小

    1.周末在家,想搞一下学习,于是远程公司的电脑(我的移动硬盘在公司,里面有虚拟机及测试环境) 发现xshell界面字体太小,不方便看,于是研究了一下如何来设置xshell 的字体大小 2.点击左上角的 ...

  3. easyUI-datagrid属性设置display：none，表头不显示

    <div class="box1"> <div class="dg1Box" style="margin-top:15px; mar ...

  4. CSS样式----CSS属性：字体属性和文本属性（图文详解）

    本文最初于2015-10-04发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重要内容 CSS的单位 字体属性 文本属性 定 ...

  5. HTML字体的设置

    CSS字体设置 box-sizing:border #content-box   box-shadow:设置盒子边框的阴影.     字体动作:   font-family:设置字体.比如:‘微软雅黑 ...

  6. wps中新罗马字体如何设置Times New Roman

    word wps中新罗马字体如何设置Times New Roman  ###   WPS字体自带 Times New Roman  ###

  7. 设置文字小于12px

    问题:有时候会需要设置一些小于12px的字或是icon: 方法:使用css3的transform的scale,来放大和缩小,但是相应的容器也会缩小 transform: scale(0.6);

  8. 解决谷歌浏览器设置font-family属性不起作用,(css中设置了font-family:没有用)css字体属性没用

    嗯,这个问题百思不得解.其他的浏览器器都没问题,在谷歌上就不行,网上找了很多,都没效果,后才发现,当然同样的问题可能错不一样的地方,我的解决方案: 感觉主要原因是自己也没查到,乱改一堆,就OK啦: 1 ...

  9. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

随机推荐

  1. 重温 w3cshool css3

    border-radius: 2em 1em 4em / 0.5em 3em;  兼容性IE9+.Firefox 4+.Chrome.Safari 5+ 以及 Opera 支持 border-radi ...

  2. canvas绘图、WebGL、SVG

    目录 一.Canvas 1.1.创建canvas元素 1.2.画线 1.3.绘制矩形 1.4.绘制圆弧 1.5.绘制图像 1.6.绘制文字 1.7.随机颜色与简单动画 二.WebGL 2.1.HTML ...

  3. C#设计模式系列：建造者模式（Builder）

    1.建造者模式简介 1.1>.定义 建造者模式(Builder)将复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. 1.2>.使用频率 中低 1.3>.原型模式应用 ...

  4. 深入理解DOM事件机制系列第三篇——事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]事件代理[5]事件冒泡[6]事件流[7]默认行为 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事 ...

  5. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  6. 一张图理解prototype、proto和constructor的三角关系

    × 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 javascript里的关系又多又乱.作用域链是一种单向的链式关系,还算简单清晰:this机制的调用关系,稍微有些复杂:而关于原型,则 ...

  7. NuGet程序包安装SQLite后完全抽离出SQLite之入门介绍及注意事项，你真的懂了吗？

    前言 近几天的几篇文章讲的内容非前面内容如系列的讲解,这几天文章都是我在项目中遇到的问题以及重新学习的知识,所以和大家分享一下,关于SQLite的文章多如牛毛,但是有些大多已经过时,为什么说过时,之前 ...

  8. 【记录】vmware fusion 7 windows 10 unidentified network

    今天在 vmware fusion 7 中,使用 windows 10 时,突然报出一个错误(忘记截图了),当时就要求强制重启系统,也没怎么在意,但是重启之后,发现 windows 10 居然不能联网 ...

  9. DDD 领域驱动设计－三个问题思考实体和值对象

    消息场景:用户 A 发送一个消息给用户 B,用户 B 回复一个消息给用户 A... 现有设计:消息设计为实体并为聚合根,发件人.收件人设计为值对象. 三个问题: 实体最重要的特性是什么? Messag ...

  10. andriod 手机按键检测事件 onKeyDown() 简述

    函数原型: public boolean onKeyDown(int keyCode, KeyEvent event); 第一个参数是用户按下键时,当前所接收到的按键代号: 第二个参数是按键事件的对象 ...