CSS教程
CSS进阶

CSS font-size

CSS中的font-size属性用于指定字体的高度和大小。它影响元素文本的大小。它的默认值是中值,可以应用于每个元素。此属性的值包括 xx-small small x-small 等。

语法

font-size: medium|large|x-large|xx-large|xx-small|x-small|small|;
font-size设置字体的大小也可以是相对的或绝对的。

绝对大小

用于将文本设置为确定的大小。使用绝对大小,不可能在所有浏览器中更改文本的大小。当我们知道输出的物理大小时,这是有利的。

相对大小

它用于设置文本相对于其相邻元素的大小。 。使用相对大小,可以在浏览器中更改文本的大小。
注意:如果不定义字体大小,则对于普通文本(如段落),默认大小为16px,等于1em。

带像素的字体大小

当我们设置带像素的文本大小时,它将为我们提供对文本大小的绝对控制。

示例

<!DOCTYPE html>
<html>
<head>
<style>
#first {
  font-size: 40px;
}
#second {
  font-size: 20px;
}
</style>
</head>
<body>
<p id="first">这个段落的大小是40px。</p>
<p id="second">这个段落的大小是20px。</p>
</body>
</html>
< 输出:

这个段落的大小是40px。

这个段落的大小是20px。

带有em的字体大小

大多数开发人员更喜欢 em 设置字体大小而不是 px。万维网联盟(W3C)推荐em。浏览器中的默认文本大小为16px。因此,我们可以说 1em 的默认大小为 16px
px em 的计算公式为: em = pixel/16

示例

<!DOCTYPE html>
<html>
<head>
<style>
#first {
  font-size: 2.5em; /* 40px/16=2.5em */
}
#second {
  font-size: 1.875em; /* 30px/16=1.875em */
 }
#third {
  font-size: 0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<p id='first'>第一段。</p>
<p id='second'>第二段。</p>
<p id='third'>第三段。</p>
</body>
</html>
< 输出:

第一段。

第二段。

第三段。

响应字体大小

我们可以使用 vw单位来设置文本的大小,该单位代表" 视口宽度" "。视口是浏览器窗口的大小。
1vw =视口宽度的1%。
如果视口的宽度为50cm,则1vw等于0.5厘米。

示例

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<p style="font-size:5vw;">第一段的宽度为1vw。</p>
<p style="font-size:10vw;">第二段宽度为2vw。</p>
</body>
</html>

第一段的宽度为5vw。

第二段宽度为10vw。

带有length属性的字体大小

它用于设置字体的长度。长度可以以cm,px,pt等为单位。在字体大小中,不允许 length 属性的负值。

语法

font-size: length;

示例

<!DOCTYPE html>
<html>
    <head>
        <style>
            .length {
                color:red;
                font-size: 1.5cm;
            }
        </style>
    </head>
    <body>
        <h1>字体大小属性。</h1>
        <p class = "length">长度为1.5cm的段落。</p>
    </body>
</html>

字体大小属性。

长度为1.5cm的段落。

昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4