CSS 如何自动调整字体大小

我们可以使用CSS给我们的 “font-size-adjust “属性来调整文本的字体大小。font-size-adjust “属性允许我们调整到一个共同的字体大小，而不考虑文档中使用的不同字体家族（如果有的话）。有了这个属性，我们就可以根据文档中大写字母的字体大小来调整文档中使用的小写字母的字体大小。

语法

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

HTML

“font-size-adjust “可以采用上面列出的许多值。这些值可以帮助我们调整到一个共同的字体大小，而不管使用的是哪种字体家族。

注意 --在进行示例之前，请确保使用Firefox，因为 “font-size-adjust “属性目前只适用于Firefox这个主要浏览器。

例子1

在这个例子中，我们将把小写字母的字体大小调整为所使用的不同字体家族的默认字体大小的一半。

<!DOCTYPE html>
<html>
<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>
      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>
      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>

HTML

例2

在这个例子中，我们将把小写字母的字体大小调整为所使用的默认字体家族默认字体大小的一半。

<!DOCTYPE html>
<html>
<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>
      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>
      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>

HTML

总结

在这篇文章中，我们学习了什么是 “font-size-adjust “属性，并在两个不同例子的帮助下，用它来自动调整文档中的文字字体大小。在第一个例子中，我们将小写字母的字体大小调整为自定义字体默认字体大小的一半；在第二个例子中，我们将小写字母的字体大小调整为默认字体的一半。

该文章在 2023/8/24 22:37:53 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。

CSS 如何自动调整字体大小

扫码分享

CSS 如何自动调整字体大小

语法

例子1

例2

总结