Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaraskan saiz fon secara automatik menggunakan CSS?

Bagaimana untuk melaraskan saiz fon secara automatik menggunakan CSS?

PHPzke hadapan: 2023-09-15 22:13:021504semak imbas

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

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

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>

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!

firefox css

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Cara menggayakan warna, saiz dan bayang ikon menggunakan CSSArtikel seterusnya：Cara menggayakan warna, saiz dan bayang ikon menggunakan CSS

Artikel berkaitan

Lihat lagi