HTML CSS 字体大小 pt、px、em、rem 用法详解
字体大小的绝对值与相对值 （px pt em rem）
1、px
Px像素（Pixel）表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素 px 与设备的物理像素 pt 有一定的区别，后续详细说明），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站，可使用 em、rem来完成。
px，相对长度单位，像素px是相对于显示器屏幕分辨率而言的。
用法：div { font-size:10px; }
兼容性和pt一样，px不会因为其它元素的尺寸变化而变化。
像素的大小是会“变”的，也称为“相对长度”，越高位的像素，其拥有的色板也就越丰富，越能表达颜色的真实感。
px特点：比较稳定和精确，但在浏览器放大缩小会出现页面混乱。
一般情况下，我们平时都是用px来定义字体（"绝对尺寸"），所以无法用浏览器字体放大的功能，IE无法调整那些使用px作为单位的字体大小。
大部分网站能调整是因为用了相对长度单位em或rem。如果改变了浏览器的缩放，web页面样式就会乱掉，这样对于用户来说，就是个大问题了。这时，就提出了相对长度单位。 Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
假设就使用浏览器默认的字号16px，来看一些px单位与rem之间的转换关系:
| px | rem |
| 10 | 10 / 16 = .625 |
| 12 | 12 / 16 = .75 |
| 14 | 14 / 16 = .875 |
| 16 | 14 / 16 = 1 |
| 18 | 18 / 16 = 1.125 |
| 20 | 20 / 16 = 1.25 |
| 24 | 24 / 16 = 1.5 |
| 30 | 30 / 16 = 1.875 |
| 32 | 32 / 16 = 2 |
| 36 | 36 / 16 = 2.25 |
| 42 | 42 / 16 = 2.625 |
| 48 | 48 / 16 = 3 |
如果你要设置一个不同的值，那么需要在根元素中定义，为了方便计算，时常将根元素 html body 设置font-size值为62.5%
html {
font-size: 62.5%;
}
相当于在中设置font-size为10px，此时，上面示例中所示的值将会改变：
| px | rem |
| 10 | 10 / 10 = 1 |
| 12 | 12 / 10 = 1.2 |
| 14 | 14 / 10 = 1.4 |
| 16 | 16 / 10 = 1.6 |
| 18 | 18 / 10 = 1.8 |
| 20 | 20 / 10 = 2 |
| 24 | 24 / 10 = 2.4 |
| 30 | 30 / 10 = 3 |
| 32 | 32 / 10 = 3.2 |
| 36 | 36 / 10 = 3.6 |
| 42 | 42 / 10 = 4.2 |
| 48 | 48 / 10 = 4.8 |
px 特点
1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px，em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
Retina屏物理像素与css像素关系图
以iPhone的Retina屏为例，其物理像素与css像素关系见上图
为此移动端浏览器以及某些桌面浏览器引入了devicePixelRatio（DPR）属性，其官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。而css像素=独立像素，由此我们可以得出 devicePixelRatio = 物理像素 / css像素，进而可以推算出该设备上一个css像素代表几个物理像素。例如iPhone的retina屏的devicePixelRatio = 2，那么该设备上一个css像素相当于2个物理像素。
2、pt
pt 点（Points），绝对长度单位，印刷行业常用的单位(磅)，等于1/72英寸，一般用于页面打印排版。
不知道经常做设计的同学知不知道zeplin这个网站，它用的像素单位都是pt。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
用法：div { font-size:10pt; }
兼容性：
3、em
em是相对长度单位，相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size；若当前文本 font-size 是px则使用绝对值px，不使用相对值em）。使用em可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。
em 特点
1. em的值并不是固定的，是相对于当前父节点的 font-size 的比例值；
2. em会继承父级元素的字体大小。
注意：任意浏览器的默认字体高都是16px，即所有未经调整的浏览器都符合: 1em=16px。
那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。（强烈推荐）
所以我们在写CSS的时候，需要注意两点：
1. body选择器中声明Font-size=62.5%；（前提，body正文内容都是 body:font-size=62.5%; 10px=1em）
2. 将你的原来的px数值除以10，然后换上em作为单位，例如：16px 现在转换成了 1.6em;
3. 重新计算那些被放大的字体的em数值，避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px，因此会重复逐级计算，效率低。因此，最好使用 根字体比例大小 rem
4、rem
rem是CSS3新增的一个相对单位（root em，根em），其参考对象为根元素<html>的font-size，因此只需要确定这一个font-size（em需考虑），只会 计算一次，不用像 em 那样重复逐级计算
rem是相对长度单位，相对于根元素(即html元素)font-size计算值的倍数，是CSS3新增的一个相对单位（root em，根em）
rem可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
用法：div { font-size:10rem; }
兼容性：
rem 引起了广泛关注，rem与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，仍然是相对大小，但 rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。
对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。
这些浏览器会忽略用rem设定的字体大小，下面就是一个例子：
p {font-size:14px; font-size:.875rem;}
注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px，或者两者同时使用。
px 与 rem 的选择
对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
px、pt、em、rem 转化表
pt=1/72(英寸)
px=1/dpi(英寸)
pt=px*dpi/72
以windows下的96dpi来计算，1pt=px*96/72=px*4/3
| 字号 | Pixels | Ems | Percent | Points |
|---|---|---|---|---|
| 八号 | 6px | 0.375em | 37.5% | 5pt |
| 七号 | 7px | 0.4375em | 43.75% | 5.5pt |
| 小六 | 8px | 0.5em | 50% | 6.5pt |
| 9px | 0.55em | 55% | 7pt | |
| 六号 | 10px | 0.625em | 62.5% | 7.5pt |
| 11px | 0.7em | 70% | 8pt | |
| 小五 | 12px | 0.75em | 75% | 9pt |
| 13px | 0.8em | 80% | 10pt | |
| 五号 | 14px | 0.875em | 87.5% | 10.5pt |
| 15px | 0.95em | 95% | 11pt | |
| 小四 | 16px | 1em | 10% | 12pt |
| 17px | 1.05em | 105% | 13pt | |
| 18px | 1.125em | 112.5% | 13.5pt | |
| 四号 | 19px | 1.2em | 120% | 14pt |
| 20px | 1.25em | 125% | 14.5pt | |
| 小三 | 21px | 1.3em | 130% | 15pt |
| 三号 | 22px | 1.4em | 140% | 16pt |
| 23px | 1.45em | 145% | 17pt | |
| 小二 | 24px | 1.5em | 150% | 18pt |
px 、em、rem 使用示例
/** body:100%=16px; 可以自定义，不同浏览器的比例标准不一样，参阅 https://www.w3.org/TR/CSS21/sample.html
* h1=32px -> 2 rem
* h2=24px -> 1.5 rem
* h3=18.72px -> 1.17 rem
* h4=16px -> 1 rem
* h5=13.28px -> 0.83 rem
* h6=12px -> 0.75 rem 实测不准确(错误的)
* h6=10.72px -> 0.67 rem chrome, firefox
*
* 可以自定义（注: 供参考，没启用），仍使用系统默认的比例大小
* h1 {font-size: 36px;} 36/16 = 2.25 rem
* h2 {font-size: 30px;} 30/16 = 1.875 rem
* h3 {font-size: 24px;} 24/16 = 1.5 rem
* h4 {font-size: 18px;} 18/16 = 1.125 rem
* h5 {font-size: 14px;} 14/16 = 0.875 rem
* h6 {font-size: 12px;} 12/16 = 0.75 rem
*/
h1, h2, h3, h4, h5, h6 {
font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
}
使用方法
现在的使用方法很多，我直接介绍我偏向的这一种了
1、rem在Sass中的使用方法
@function rem($values){
$root :16px;
$unit: rem;
$list: ();
@each $v in $values {
$res:0;
@if ($v == 0 or $v == auto or unit($v) == rem or unit($v) == em or unit($v) == vw or unit($v) == vh){
$res: $v;
}@else{
$res: ($v + 0px) / $root + $unit;
}
$list : append($list , $res);
}
@return $list;
}
less也可以同理这么写一个
//SASS
div{
margin:rem(10px 10rem 0 auto);
}
//编译后CSS
div{
margin:0.625rem 10rem 0 auto;
}
2、rem在less中的使用方法，这是一种简单的实现方式
html{
font-size:62.5%;
}
@baseFontSize:10;
.pxTorem(@name, @px){
@{name}: @px / @baseFontSize * 1rem;
}
.pxTorem(@name, @px1 , @px2){
@{name}: @px1 / @baseFontSize * 1rem @px2 / @baseFontSize * 1rem;
}
.pxTorem(@name, @px1 , @px2 , @px3 ){
@{name}: @px1 / @baseFontSize * 1rem @px2 / @baseFontSize * 1rem @px3 / @baseFontSize * 1rem;
}
.pxTorem(@name, @px1 , @px2 , @px3 , @px4){
@{name}: @px1 / @baseFontSize * 1rem @px2 / @baseFontSize * 1rem @px3 / @baseFontSize * 1rem @px4 / @baseFontSize * 1rem;
}
//LESS
div{
.pxTorem(width,100);
.pxTorem(height,100);
.pxTorem(padding,10,20);
.pxTorem(margin,10,20,30,40);
}
//编译后 CSS
div{
width:10rem;
height:10rem;
padding:1rem 2rem;
margin:1rem 2rem 3rem 4rem;
}
其它方法
1、px转rem在线工具
这是我看另一个网友推荐的： http://www.ofmonkey.com/front/rem
2、gulp等各类打包工具
这个方法比较激进，打包时直接匹配px，强行转为rem。
var replace = require('gulp-replace');
gulp.task('pxToRem', function(){
return gulp.src('*.html')
.pipe(replace(/(\d+)px/g, function(match, p1){
return Number(p1) / 10 + 'rem';
}))
.pipe(gulp.dest('dir'));
});
基于编辑器sublime Text插件cssrem，参考：https://github.com/flashlizi/cssrem
Idea 也有SCSS SASS LESS对应的自动转换插件
Default style sheet for HTML 4
This appendix is informative, not normative.
This style sheet describes the typical formatting of all HTML 4 ([HTML4]) elements based on extensive research into current UA practice. Developers are encouraged to use it as a default style sheet in their implementations.
The full presentation of some HTML elements cannot be expressed in CSS 2.1, including replaced elements ("img", "object"), scripting elements ("script", "applet"), form control elements, and frame elements.
For other elements, the legacy presentation can be described in CSS but the solution removes the element. For example, the FONT element can be replaced by attaching CSS declarations to other elements (e.g., DIV). Likewise, legacy presentation of presentational attributes (e.g., the "border" attribute on TABLE) can be described in CSS, but the markup in the source document must be changed.
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block; unicode-bidi: embed }
li { display: list-item }
head { display: none }
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { margin: 8px }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea,
input, select { display: inline-block }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
table { border-spacing: 2px; }
thead, tbody,
tfoot { vertical-align: middle }
td, th, tr { vertical-align: inherit }
s, strike, del { text-decoration: line-through }
hr { border: 1px inset }
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "\A"; white-space: pre-line }
center { text-align: center }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
@media print {
h1 { page-break-before: always }
h1, h2, h3,
h4, h5, h6 { page-break-after: avoid }
ul, ol, dl { page-break-before: avoid }
}
参考推荐：
Improve your jQuery – 25 excellent tips
版权所有: 本文系米扑博客原创、转载、摘录，或修订后发表，最后更新于 2020-01-27 05:01:22
侵权处理: 本个人博客，不盈利，若侵犯了您的作品权，请联系博主删除，莫恶意，索钱财，感谢！