.example { font-size: 16px; /* 使用像素作为单位 */ font-size: 1em; /* 使用父元素字体大小作为参照 */ font-size: 1.5rem; /* 使用根元素字体大小作为参照 */ font-size: 12pt; /* 使用磅作为单位 */ }
其中,像素是最常用的单位,可以通过直接设置像素值来确定字体大小。
em是相对于父元素的字体大小来计算的单位,因此可以实现相对缩放的效果。比如,如果父元素的字体大小为16px,子元素的字体大小为1em,那么子元素实际字体大小就是16px。
rem则是相对于根元素的字体大小来计算的单位。由于根元素是页面中最上层的元素,它的字体大小不会受到其他元素的影响,因此使用rem作为单位可以实现全局字体大小的统一。
pt是磅的单位,它与像素的转换比例固定为1 pt = 1/72 inch,因此在不同的设备上显示的大小是一样的。但是,由于每个设备的像素密度不同,所以实际大小还是会有差异。
在实际开发中,应根据具体情况选择不同的单位来设置字体大小。如果希望实现相对缩放的效果,可以使用em单位;如果需要全局统一字体大小,可以使用rem单位。