如何使用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

在这个例子中，我们将小写字母的字体大小调整为不同字体系列默认字体大小的一半。

Open Compiler
<!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>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例2

在这个例子中，我们将小写字母的字体大小调整为默认字体系列默认字体大小的一半。

Open Compiler
<!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>

结论

在本文中，我们学习了“font-size-adjust”属性是什么，并使用它通过两个不同的例子，利用CSS自动调整文档中文本的字体大小。在第一个例子中，我们将小写字母的字体大小调整为自定义字体的默认字体大小的一半；在第二个例子中，我们将小写字母的字体大小调整为默认字体的默认字体大小的一半。

更新于：2023年2月22日

750 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告