如何使用 CSS 自动调整字体大小?

cssweb developmentfront end technology更新于 2025/1/24 3:56:17

我们可以使用 CSS 提供的"font-size-adjust"属性来调整文本的字体大小。"font-size-adjust"属性允许我们将文本调整为通用字体大小，而无需考虑文档中使用的不同字体系列(如果有)。通过此功能，我们可以根据文档中大写字母的字体大小来调整文档中使用的小写字母的字体大小。

语法

font-size-adjust:number | initial | none | inherit | revert | revert-layer | unset

"font-size-adjust"可以采用上面列出的许多值。这些值帮助我们调整到通用的字体大小，无论使用哪种字体系列。

注意 - 在继续示例之前，请确保使用 Firefox，因为"font-size-adjust"属性目前仅在主流浏览器中可用。

示例 1

在此示例中，我们将小写字母的字体大小调整为所用不同字体系列默认字体大小的一半。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to auto adjust font size using CSS?</title>
   <style>
      p {
         font-size-adjust: 0.5;
      }
      .a {
         font-family: 'Times New Roman', Times, serif;
      }
      .b {
         font-family: Helvetica;
      }
   </style>
</head>
<body>
   <h3>How to auto adjust font size using CSS?</h3>
   <p class="a">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
   </p>
   <p class="b">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
   </p>
</body>
</html>

示例 2

在此示例中，我们将小写字母的字体大小调整为所用默认字体系列的默认字体大小的一半。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to auto adjust font size using CSS?</title>
   <style>
      p {
         font-size-adjust: 0.5;
      }
   </style>
</head>
<body>
   <h3>How to auto adjust font size using CSS?</h3>
   <p class="a">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
   </p>
   <p class="b">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus ipsa maiores ratione dolores consectetur soluta a hic recusandae fugiat quibusdam beatae voluptatum, repudiandae ipsam ex fuga nobis numquam corporis magnam?
   </p>
</body>
</html>