[分享]css中em字体的优缺点

CSS中的em字体是一种相对于父元素字体大小的单位，它在实际应用中有其优缺点。

p { font-size: 16px; }
span { font-size: 1.2em; } 

首先，em字体优点在于其可根据父元素的字体大小自适应调整，这使得设计人员能够更加灵活地设计页面布局和字体排版。同时，使用em字体可以减少代码中的重复样式设置。

p { font-size: 16px; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; } 

在上述代码中，h1和h2的字体大小都是通过p的字体大小乘以一个倍数来计算得出，且这两个元素之间的字体大小差也是通过倍数决定的。因此，使用em字体可以使代码更加简洁。

但是，em字体也有其缺点。如果嵌套层级过深，字体大小就会不断被累乘，导致最终的字体大小不如预期。例如：

div { font-size: 16px; }
p { font-size: 1.5em; }
span { font-size: 1.2em; } 

在上述代码中，span标签字体大小实际上是1.5 x 1.2 = 1.8em，而不是1.2em。这意味着如果父元素包含多层嵌套，字体大小就会变得难以计算和控制，从而影响页面的可读性。

因此，在使用em字体时需要注意嵌套层级以及控制字体大小的最大值和最小值，避免出现错误的字体大小。同时，也需要根据具体情况选择更为适合的字体单位，让页面呈现更佳的效果。