3.8 KiB
| title | localeTitle |
|---|---|
| Font Size Property | 字体大小属性 |
字体大小属性
定义和用法
font-size属性用于设置元素字体的大小。以下是此属性的默认语法。
font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;
如上所示，此属性可以采用多个值。默认值为_medium_ ，从_xx-small_到_xx-large的_值将字体大小设置为从非常小到非常大（如服装尺寸）。 _较小_和_较大的_值将字体大小设置为小于父元素的字体大小，并分别大于父元素的字体大小。尽管有上述值，但最常用的值是长度单位。长度单位可以包括： px ， ％ ， em ， rem和pt 。
长度单位解释
PX
您可以使用* _px_单位为元素设置固定的字体大小（以像素为单位）。一个像素是用户屏幕上的一个点。由于像素提供固定的字体大小，因此字体大小无法响应。这是一个负面因素，因为字体大小在不同的屏幕尺寸上可能看起来不太好，您必须使用媒体查询来缩放字体。
例：
p {
font-size: 20px;
}
结果： 
％
您可以使用百分比**％**单位设置相对于body元素字体大小的字体大小。默认值为16px，因此100％将等于16px。如果更改了正文的字体大小，则正文中包含的值为百分比的任何元素的字体大小也将更改。此单元允许在各种屏幕尺寸上缩放字体。
例：
p {
font-size: 120%;
}
结果： 
上面的代码将字体大小更改为默认字体大小的120％，即16px。
EM
可以用于字体大小的另一个单元是em单元。一个em单位等于最近父元素的默认字体大小。这意味着2em将是字体大小的两倍，而4em将是字体大小的4倍。 em单元正在变得越来越流行，因为它可以扩展并且适合移动设备。
例：
p {
font-size: 1.4em;
}
结果： 
上面的代码将段落的字体大小设置为其最近父节点（即body元素）的字体大小的1.4倍。 body元素的默认字体大小为16px，因此该段的字体大小为1.4 * 16 = 22.4px。
REM
rem单元与em单元非常相似，但字体大小相对于根元素的默认字体大小。根元素是<html>元素。
例：
html {
font-size: 12px;
}
p {
font-size: 1.4rem;
}
结果： 
上面的段落有1.4em的字体大小。这次根元素的字体大小已更改为12px，因此段落的字体现在为12 * 1.4 = 16.8px。 rem单元不考虑body元素的字体，尽管它仍然是16px。
PT
字体大小的最终单位是点（ pt ）值。此值与文本的实际大小相关。一个PT等于在纸上1/72英寸，所以72pt等于1英寸。点值在纸上是准确的，但在不同的浏览器上看起来可能不同。仅当您需要打印具有精确字体大小的页面时，此单位才有用。 pt单元不可扩展。
例：
p {
font-size: 16pt;
}
结果： 
上面的字体大小是16pt。
如果您想阅读有关此主题的更多信息，我已在下面附上了一些文章链接。