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;
}
如果您想阅读有关此主题的更多信息,我已在下面附上了一些文章链接。