使用 CSS 中百分比和 em 的组合


我们可以结合使用百分比和 em 来指定元素的字体大小,以实现更好的字体兼容性。这使我们可以在不同的浏览器中获得统一的文本。百分比和 em 都是相对测量值。

语法

CSS font-size 属性的语法如下。对于 value,以下适用于百分比和 em 单位。此外,还可以设置其他长度单位 -

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

示例

以下示例说明如何设置 CSS font-size 属性。首先,我们使用 font-size 属性使用百分比设置 <body> 字体 -

body {
   font-size: 80%;
}

使用 em 单位设置 <p> 元素的字体大小 -

p {
   font-size: 2em;
}

让我们看看示例 -

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-size: 80%;
      }
      p {
         font-size: 2em;
      }
      span {
         font-size: 4em;
         font-style: italic;
      }
   </style>
</head>
<body>
   <p>Reading <span>source code</span> written by others gives you opportunity to criticize the mistakes done in writing that code</p>
</body>
</html>

示例

以下示例说明如何设置 CSS font-size 属性。首先,我们使用

使用 font-size 属性使用百分比设置字体 -

div {
   font-size: 120%;
}

设置字体大小

元素使用 em 单位 -

p {
   font-size: 2em;
}

让我们看看示例 -

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         font-size: 120%;
      }
      p {
         font-size: 2em;
      }
   </style>
</head>
<body>
   <h3>Demo Heading</h3>
   This is example text.
   <div>
      Examples are easier to understand with practical implementation
      <p>This is another text just to display different ways to set font size in CSS.</p>
   </div>
</body>
</html>

更新于: 2024 年 1 月 2 日

297 次浏览

开启您的职业生涯

完成课程以获得认证

开始
广告