How to automatically adjust font size using CSS?-CSS Tutorial-php.cn

How to automatically adjust font size using CSS?

PHPz

Release： 2023-09-15 22:13:02

forward

1650 people have browsed it

How to automatically adjust font size using CSS?

We can use the "font-size-adjust" property provided by CSS to adjust the font size of text. The "font-size-adjust" property allows us to adjust to a universal font size regardless of the different font families used in the document (if any). This way we can adjust the font size of the lowercase letters used in the document relative to the font size of the uppercase letters in the document.

grammar

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

Copy after login

"font-size-adjust" can take many of the values listed above. These values help us adjust to a universal font size, regardless of which font family is used.

Note - Before continuing with the example, make sure you are using Firefox, as the "font-size-adjust" property currently only works in Firefox as the primary browser.

Example 1

In this example, we adjust the font size of the lowercase letters to half the default font size for the different font families used.

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

Copy after login

Example 2

In this example, we adjust the font size of the lowercase letters to half the default font size of the default font family used.

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

Copy after login

in conclusion

In this article, we learned what the "font-size-adjust" property is and used it to automatically adjust the font size of text in a document using CSS through two different examples. In the first example, we adjust the font-size of the lowercase letters to half the default font-size of the custom font, and in the second example, we adjust the font-size of the lowercase letters to half the default font-size of the default font.

The above is the detailed content of How to automatically adjust font size using CSS?. For more information, please follow other related articles on the PHP Chinese website!