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是相对于父层字体大小的缩放,和你的屏幕大小无关。
font-size的探究的更多相关文章
- hiho #1288 微软2016.4校招笔试题 Font Size
#1288 : Font Size 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Steven loves reading book on his phone. The ...
- LaTeX :font size 修改字体大小的几种方式
调整字体大小的几种方式,大小依次增大,具体如下: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \hu ...
- GetPropInfo Font Size
设置font size,遍历所有控件,有的控件没有font属性,所以要用GetPropInfo判断 if (GetPropInfo(cmp, "font")) function G ...
- unity UGUI text font size对性能影响较大
Font Size对ugui text的性能影响非常大. <Cube Duck Run>在itouch5上测试是很流畅的,但是在iphone5上测试,在game over后显示历史最高分时 ...
- XE6 c++builder 设置 font size GetPropInfo SetOrdProp
PPropInfo ppi; PTypeInfo pti; TTypeKinds ttk; TRttiContext context; TRttiType *rttiType TObject* obj ...
- UIAlertController custom font, size, color
本文转载至 http://stackoverflow.com/questions/26460706/uialertcontroller-custom-font-size-color up vote2d ...
- Phone Font Size
This table lists and describes the various font sizes that can be applied. Attribute = FontSize Na ...
- PyCharm Change Font Size
file->settings->colors&fonts-> save as (save the current scheme as your own)-> font- ...
- 【hihoCoder】1288 : Font Size
题目:http://hihocoder.com/problemset/problem/1288 手机屏幕大小为 W(宽) * H(长),一篇文章有N段,每段有ai个字,要求使得该文章占用的页数不超过P ...
- LaTex Font Size 字体大小命令
LaTex中字体大小有很多中等级,分别由下列命令控制: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE ...
随机推荐
- jvm 内存整理 -----学习
分为:方法区 ,堆 ,栈 ,本地栈 ,程序计数器 1.程序计数器 保存当前线程执行的字节码行号指示器,解释器工作时,都是通过改变计数器的值来获取下一条程序指令,循环.异常.跳转.分支. ...
- (八)ASP.NET自定义用户控件(1)
http://blog.csdn.net/laodao1/article/details/5897366 ASP.NET自定义控件组件开发 第一章:从一个简单的控件谈起 起始开发ASP.NET自定义控 ...
- MapReduce读取hdfs上文件,建立词频的倒排索引到Hbase
Hdfs上的数据文件为T0,T1,T2(无后缀): T0: What has come into being in him was life, and the life was the light o ...
- Top 10 steps to optimize data access in SQL Server
2009年04月28日 Top 10 steps to optimize data access in SQL Server: Part I (use indexing) 2009年06月01日 To ...
- [CF660C]Hard Process(尺取法)
题目链接:http://codeforces.com/problemset/problem/660/C 尺取法,每次遇到0的时候补一个1,直到补完或者越界为止.之后每次从左向右回收一个0点.记录路径用 ...
- Hadoop集群(第8期)_HDFS初探之旅
1.HDFS简介 HDFS(Hadoop Distributed File System)是Hadoop项目的核心子项目,是分布式计算中数据存储管理的基础,是基于流数据模式访问和处理超大文件的需求而开 ...
- Linux 总结1
============================= 一般 ========================================= chown -R oracle:oinstall ...
- 结构体 lock_t;
typedef struct lock_struct lock_t; //利用typedef定义一个变量的类型 /** Lock struct */ struct lock_struct { trx_ ...
- UVa 10474 Where is the Marble
题意:给出一列数,先排序,再查找学习了sort函数,lower_bound函数sort:可以给任意对象排序(包括自己定义的)(前提是定义好了‘<’运算符)lower_bound:查找大于或者等于 ...
- Hadoop实战课程
Hadoop生态系统配置Hadoop运行环境Hadoop系统架构HDFS分布式文件系统MapReduce分布式计算(MapReduce项目实战)使用脚本语言Pig(Pig项目实战)数据仓库工具Hive ...