使用 CSS 关键字设置字体大小


CSS 的 font-size 属性可以使用绝对和相对关键字来设置。这可以根据需要缩放文本。

语法

CSS font-size 属性的语法如下:

Selector {
   font-size: /*value*/
}

下表列出了 CSS 中使用的标准关键字:

序号值和描述
1medium
将字体大小设置为中等大小。这是默认值
2xx-small
将字体大小设置为 xx-small 大小
3x-small
将字体大小设置为 extra small 大小
4small
将字体大小设置为小号大小
5large
将字体大小设置为大号大小
6x-large
将字体大小设置为 extra-large 大小
7xx-large
将字体大小设置为 xx-large 大小
8smaller
将字体大小设置为小于父元素的大小
9larger
将字体大小设置为大于父元素的大小

以下示例说明了如何使用关键字设置 CSS font-size 属性。

示例

 实时演示

<!DOCTYPE html>
<html>
<head>
<style>
h1{
   font-size: larger;
}
#demo {
   font-size: medium;
   text-align: center;
   background-color: floralwhite;
}
p {
   font-size: xx-large;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p id="demo">This is demo text.</p>
<p>This is another demo text.</p>
</body>
</html>

输出

这将产生以下输出:

示例

 实时演示

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   padding: 5px;
   width: 30%;
   border: 1px solid;
   border-radius: 29%;
   text-align: center;
   font-size: xx-small;
}
p {
   font-size: xx-large;
}
</style>
</head>
<body>
<div>
<div>One</div>
<p>Two</p>
</div>
</body>
</html>

输出

这将产生以下输出:

更新于: 2020年1月9日

211 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告