CSS中字体大小的度量单位是什么？

一、PX

在 CSS 中，字体大小使用像素（px）作为度量单位是最常见的。像素是屏幕显示的最小单元，使用像素作为字体大小的单位可以保证在不同屏幕分辨率下字体大小的统一，无论屏幕尺寸大小如何，像素大小都保持不变。下面是一个示例代码：

    
        .example {
            font-size: 16px;
        }
    

二、EM

相对于像素的固定单位，em（也称为“相对单位”）是相对于父元素的字体大小计算的单位。如果没有设置父元素的字体大小，则默认使用浏览器默认字体大小。

EM的特点是可以实现文本的动态缩放，并且相对于像素更加灵活。当在一部分包含其他样式的文本中使用EM时，文本将根据父元素的字体大小来缩放。EM的缺点是必须手动计算。

    
        .example {
            font-size: 1.5em;  /* 父元素字体大小的 1.5 倍 */
        }
    

三、REM

和 px 一样，rem也是一个固定的单位，但相对于根元素（即 HTML 标签）的字体大小。这意味着使用REM单元可以确保在不同的屏幕和设备上，字体大小相对更加一致。

REM的另一个特点是能够方便地进行响应式设计，因为随着视口的调整，根元素的字体大小可以进行相应地调整。

    
        html {
            font-size: 16px;  /* 设定根元素的字体大小 */
        }
        .example {
            font-size: 1.5rem;  /* 相对于根元素的字体大小1.5倍 */
        }
    

四、百分比

百分比也是一种相对单位，是相对于父元素的字体大小计算的。当一个元素使用百分比设置字体大小时，字体大小将相对于其父元素的字体大小计算。

    
        .parent {
            font-size: 16px;
        }
        .example {
            font-size: 150%;  /* 父元素字体大小的150% */
        }
    

五、vw/vh

vw和vh是相对于视口宽度和高度的，其中1vw等于视口宽度的1%（换句话说，它是视口宽度的1/100）。使用vw和vh可以确保字体在不同的屏幕大小和分辨率下都获得合适的大小。

但有一个潜在的问题是，视口宽度和高度可能随着浏览器窗口的大小而改变，这意味着在不同的设备上可能看起来略微有点不同。

    
        .example {
            font-size: 4.5vw;  /* 视口宽度的4.5%，用于字体大小 */
        }
    

综上所述，CSS中字体大小的度量单位虽然有很多，但一般比较常用的是像素（px）和EM（em）。