CSS中常用的字体单位

柔光的暖阳◎ 2022-06-08 10:27 208阅读 0赞

**1、px**

px单位名称为像素，像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取)。一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站。

像素单元的一个问题是,它没有为视障读者的扩展,以适应移动设备。

**2，pt**

PT是point(磅)缩写，是一种固定长度的度量单位,大小为1/72英寸。如果在web上使用pt做单位的文字，字体的大小在不同屏幕（同样分辨率）下一样，这样可能会对排版有影响，但在Word中使用pt相当方便。因为使用Word主要目的都不是为了屏幕浏览，而是输出打印。当打印到实体时，pt作为一个自然长度单位就方便实用了：比如Word中普通的文档都用“宋体 9pt”，标题用“黑体 16pt”等等，无论电脑怎么设置，打印出来永远就是这么大。

**3、em**

em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，国外使用比较多；

em单位有如下特点

1.  em的值并不是固定的;
2.  em会继承父级元素的字体大小。

我们在写CSS的时候如果要用em为单位，需要注意以下几点：

1. body选择器中声明Font-size=62.5%;

2. 将你的原来的px数值除以10，然后换上em作为单位;

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。  
　　  
**转换**

浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px，

也就是说1px=0.0625em。为了简化font-size的换算，

可以在css中的body中先全局声明font-size=62.5%

，也就是定义了默认字体大小为16px\*0.625=10px,子元素会继承父级元素的字体大小，于是1em=10px，所以12px=1.2em。px与em的转换通过10就可以得来。但是定义font-size=0.625em或者直接定义12px，这是没有效果的，

此外有一点必须要注意，IE处理汉字时，对于浮点的取值精确度有限，由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。只要将62.5%换成63%就可以了。

pt和px的换算公式也比较简单，pt=px乘以3/4。

em是继承父元素的字体大小，可是当父元素字体大小改变时，又得重新计算了，这不怎么方便，还好rem解决了这个问题

**4、rem**

CSS3引入新的字体尺寸单位 rem ，可以简单记忆为root rm。

CSS3的出现，他同时引进了一些新的单位，包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。

em单位是相对于父节点的font-size，会有一些组合的问题，而rem是相对于根节点（或者是html节点），意思就是说你可以在html节 点定义一个单独的字体大小，然后所有其他元素使用rem相对于这个字体的百分比进行设置，这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设 置多大的字体，这完全可以根据您自己的需，大家也可以参考下图：

![这里写图片描述][SouthEast]

我们来看一个简单的代码实例：

html { font-size:62.5%;/*10 ÷ 16 × 100% = 62.5%*/ }
    body { font-size:1.4rem;/*1.4 × 10px = 14px */ }
    h1 { font-size:2.4rem;/*2.4 × 10px = 24px*/ }

我在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。从上面的计算结果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之处。

rem是CSS3新引进来的一个度量单位，大家心里肯定会觉得心灰意冷呀，担心浏览器的支持情况。其实大家不用害怕，你可能会惊讶，支持的浏览器还 是蛮多的，比如：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。只是可怜的IE6-8不支持。

不过使用单位设置字体，可不能完全不考虑IE了，**如果你想使用这个REM，但也想兼容IE下的效果，可你可考虑“px”和“rem”一起使用，**用”px”来实现IE6-8下的效果，然后使用“Rem”来实现代浏览器的效果。

[SouthEast]: /images/20220608/e77dd666db0942b0837cb044f844a8bf.png