Bagaimana untuk melaraskan saiz fon secara automatik menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk melaraskan saiz fon secara automatik menggunakan CSS?

PHPz

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

ke hadapan

1536 orang telah melayarinya

Bagaimana untuk melaraskan saiz fon secara automatik menggunakan CSS?

Kita boleh menggunakan sifat "font-size-adjust" yang disediakan oleh CSS untuk melaraskan saiz fon teks. Sifat "font-size-adjust" membolehkan kami melaraskan kepada saiz fon universal tanpa mengira keluarga fon berbeza yang digunakan dalam dokumen (jika ada). Dengan cara ini kita boleh melaraskan saiz fon huruf kecil yang digunakan dalam dokumen berbanding dengan saiz fon huruf besar dalam dokumen.

Tatabahasa

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

Salin selepas log masuk

"font-size-adjust" boleh mengambil banyak nilai yang disenaraikan di atas. Nilai ini membantu kami menyesuaikan diri dengan saiz fon universal, tanpa mengira keluarga fon yang digunakan.

NOTA - Sebelum meneruskan dengan contoh, pastikan anda menggunakan Firefox kerana sifat "font-size-adjust" pada masa ini hanya tersedia dalam Firefox sebagai penyemak imbas utama.

Contoh 1

Dalam contoh ini, kami melaraskan saiz fon huruf kecil kepada separuh saiz fon lalai bagi keluarga fon berbeza yang digunakan.

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

Salin selepas log masuk

Contoh 2

Dalam contoh ini, kami melaraskan saiz fon huruf kecil kepada separuh saiz fon lalai keluarga fon lalai yang digunakan.

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

Salin selepas log masuk

Kesimpulan

Dalam artikel ini, kami mempelajari melalui dua contoh berbeza tentang sifat “font-size-adjust” dan menggunakannya untuk melaraskan saiz fon teks secara automatik dalam dokumen menggunakan CSS. Dalam contoh pertama, kami melaraskan saiz fon huruf kecil kepada separuh saiz fon lalai fon tersuai, dan dalam contoh kedua, kami melaraskan saiz fon huruf kecil kepada separuh saiz fon lalai. daripada fon lalai.

Atas ialah kandungan terperinci Bagaimana untuk melaraskan saiz fon secara automatik menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!