css的字体单位

在css中的字体单位主要以px、em、rem为主.其中px也就是像素，是一种字体长度，它的长度是相对于显示器的品目分辨率而言的。一般情况下在浏览器中默认字体的大小是16px。其中em是相对字体。em的值不是固定不变的它的字体大小相对于父级元素的字体的大小而定的。而rem虽然也是相对字体，但是它的大小不是相对于父级元素，而是相对于html的根元素的字体大小而定的。现在简单的用代码写一下字体，这样会看的更加清晰。

我们现在简单的用两个div，并且分别为他们的字体进行定义从而观察px，em，rem。

第一步：我们在div中分别输入不同的字符串

html代码：

<div id="div1">欢迎来到我的博客<div id="div2">独艾心尔</div></div>

为了看的更加清晰，我们在给两个div一些样式

css代码：

#div1{width: 300px;height: 150px;border:solid 1px black;margin-top:30px;text-align:center;}

#div2{width: 300px;height: 50px;border:solid 1px black;margin-top: 20px;text-align:center;}

效果图：

第二步：此时的字体大小是16px，所以在浏览器中，字体的默认大小是16px。现在我们分别更改两个div字体大小为32px，8px

此时的css代码

#div1{font-size: 32px;}

#div2{font-size: 8px;}

效果图：

第三步：可见经过定义之后，div2中的字体有了明显的变化，现在我们分别看一下em的效果，我们分别给div2的大小为1em看它如何变化

css代码：

#div2{font-size: 1em;}

效果图：

如图可见div2中的字体大小变成了16px，可见字体单位em的大小是根据父级的大小而变化的。

第四步，同样是对div2进行改变，这是将div2的字体变为1rem看div2的字体大小变化

css代码：

#div2{font-size: 1rem;}

效果图：

由此可见rem的相对字体大小是相对于html的根文件的大小而相对而定的，与父级字体的大小没有关联 。

以上就是对字体单位的简单的一些介绍，希望对大家有所帮助。