font-size的探究

整理网上的资料

 

font字体，用px，em，100%,rem?分什么情况考虑？

我们逐渐意识到，我们用px作为文字大小的单位，已经出现很多问题。最主要是体现在用户不能灵活的控制文字的大小。
　对于大多数用户来说或许这并无不妥，但对于年龄稍大及眼力不佳的访客来说，他们不能按他们的意愿，通过浏览器来改变文字的大小。我们以“用户至上”为原则，我们应该采取一种策略，不要求通过px为单位获得100%的精确性，我们需要获得更大的浏览器的可伸缩性与易用性，灵活的满足访客的需要。

一、长度单位

　　长度单位分为两种，一种是相对长度，另一种是绝对长度。
　　以下为三种相对长度单位：
　　◆em相对于父对象的大小
　　◆ex相对于特定字体中的字母x的高度
　　◆px相对于特定设备的分辨率，这是最最常用的单位，也是我们一直坚守的单位。从技术角度来说，px像素其实是一种相对大小的度量单位，它于特定设备的显示或打印的分辨率有关。例如，一个像素在被显示在计算机屏幕上与被打印在纸张上的大小是不同的。

　　以下为五种font-size属性值绝对长度单位：

　　绝对长度单位在打印时或在屏幕显示设备的物理尺寸已知时才比较有用。
　　◆in英寸
　　◆cm厘米
　　◆mm毫米
　　◆pt点
　　◆pc12点活字

二、相对大小的关键字

　　font-size属性值相对大小的关键字只有两个值：
　　◆larger
　　◆smaller
　　这两个值的设定与父对象的设定值有关。我们可以像理解老式的<small><big>那样来理解它们。它们是设定文字大小的最基本的方式，并会受到上层对象的文字大小定义的影响。

　　三、绝对大小的关键字

　　这类关键字共有7个，他们的实际大小根据不同的浏览器及设备来决定。

　　◆xx-small
　　◆x-small
　　◆small
　　◆medium
　　◆large
　　◆x-large
　　◆xx-large

　　W3C建立建议浏览器开发公司，将每个关键字之间的比例设定为1.5。并推荐让这个比例保持恒定，妈medium是small的1.5倍。同样large是medium的1.5倍。

　　四、百分比

　　font-size属性值中使用百分比设置大小，将在容器对象文字大小的基础上进行改变。如果我们设置body的文字大小为10。我们设置p的文字大小为150%，则p的文字大小就为15。不管10是什么样的单位，百分比作为一种比例进行缩放调整。

 

我们常用的有px、%、em，px就不多说了，em和%多说点儿：

 移动端html5手机网站字体单位font-size选择px还是rem
分为两种情况：
①对于只需要适配手机设备，使用px就可以了
 
②对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
 
rem参考代码：

html {font-size:10px}
 
@media screen and (min-width:480px) and (max-width:639px) {
    html {
        font-size: 15px
    }
}
 
@media screen and (min-width:640px) and (max-width:719px) {
    html {
        font-size: 20px
    }
}
 
@media screen and (min-width:720px) and (max-width:749px) {
    html {
        font-size: 22.5px
    }
}
 
@media screen and (min-width:750px) and (max-width:799px) {
    html {
        font-size: 23.5px
    }
}
 
@media screen and (min-width:800px) and (max-width:959px) {
    html {
        font-size: 25px
    }
}
 
@media screen and (min-width:960px) and (max-width:1079px) {
    html {
        font-size: 30px
    }
}
 
@media screen and (min-width:1080px) {
    html {
        font-size: 32px
    }
}

em就是基于当前元素的(如果没设置就是继承其父元素的)font-size。

而%对于font-size、line-height等，是基于其父元素的font-size的，而对于text-indent、margin、padding、width等属性，则是基于父元素的宽度的。

 

CSS3中的单位：

css3中引入了一些新的单位：

• ch——字符0(零)的宽度；
• rem——根元素(html元素)的font-size；
• vw——viewpoint width，视窗宽度，1vw等于视窗宽度的1%；
• vh——viewpoint height，视窗高度，1vh等于视窗高度的1%；
• vmin——vw和vh中较小的那个。

显然vw、vh、vmin是针对移动设备的，如果视窗大小变化了，这三个值也会跟着相应的变化。

rem单位感觉就是px+em的变体，是否值得使用还要看你自己的取舍：没有px精确也没有em灵活——或者说，比px灵活，比em更精确～～。。。XD。。。

如果没有定义font-size怎么办？

其实不用担心，传说，各个浏览器史无前例的默认 font-size:16px;，所以，即便你在样式文件中忘了定义 font-size 初始值，也可以放心的使用em、rem。

浏览器支持：

rem，各浏览器基本都支持了:

• IE9+
• FF3.6+
• Chrome 6+
• Safari 5+
• Opera 11.6+

vw、vh、vmin:

• Chrome 26+
• Firefox 19+
• Safari 6.1+
• IE 9+ (部分支持)
• iOS Safari 6.1+ (部分支持)
• android 4.4+

 同样是xxrem（某个值的rem）的宽度或长度，谷歌比ff、opera等其他浏览器要大很多，因为 Chrome 强制最小字体为 12px，即使设置成 10px 最终都会显示成 12px。

em是相对于父层字体大小的缩放，和你的屏幕大小无关。