使用 CSS 使用 em 设置字体大小

cssweb developmentfront end technology更新于 2025/1/19 6:04:17

为了使文本大小可缩放，字体大小以 em 为单位。默认情况下，1 em 等于 16px 或 12pt。其值相对于父元素的字体大小。

语法

CSS 字体大小属性的语法如下 −

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

示例

以下示例说明了如何以 em 为单位设置 CSS 字体大小属性 −

<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 40%;
   border: 2px solid yellow;
   padding: 20px;
   font-size: 1em;
}
span {
   font-size: 2em;
   background-color: chartreuse;
}
</style>
</head>
<body>
<div>
<p>This is a demo paragraph<span> displaying font sizes</span> set with em in CSS.</p>
</div>
</body>
</html>

输出

这将给出以下输出 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
table {
   width: 40%;
   border: 2px ridge red;
   font-size: 0.8em;
}
span {
   font-size: 1.5em;
   background-color: silver;
}
</style>
</head>
<body>
<h2>Class Info</h2>
<table>
<tr>
<th>Number of Students</th>
</tr>
<tr>
<td>Class A</td>
<td><span>50 Students</span></td>
</tr>
<tr>
<td>Class B</td>
<td><span>40 Students</span></td>
</tr>
</table>
</body>
</html>