CSS 如何自动调整字体大小

我们可以使用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 “属性目前只适用于Firefox这个主要浏览器。

例子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>