Wie kann ich die Schriftgröße mithilfe von CSS automatisch anpassen?-CSS-Tutorial-php.cn

Wie kann ich die Schriftgröße mithilfe von CSS automatisch anpassen?

PHPz

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

nach vorne

1581 Leute haben es durchsucht

Wie kann ich die Schriftgröße mithilfe von CSS automatisch anpassen?

Wir können die von CSS bereitgestellte Eigenschaft „font-size-adjust“ verwenden, um die Schriftgröße von Text anzupassen. Die Eigenschaft „font-size-adjust“ ermöglicht uns die Anpassung an eine universelle Schriftgröße, unabhängig von den verschiedenen im Dokument verwendeten Schriftfamilien (falls vorhanden). Auf diese Weise können wir die Schriftgröße der im Dokument verwendeten Kleinbuchstaben relativ zur Schriftgröße der Großbuchstaben im Dokument anpassen.

Grammatik

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

Nach dem Login kopieren

„font-size-adjust“ kann viele der oben aufgeführten Werte annehmen. Diese Werte helfen uns, uns auf eine universelle Schriftgröße einzustellen, unabhängig davon, welche Schriftfamilie verwendet wird.

HINWEIS – Bevor Sie mit dem Beispiel fortfahren, stellen Sie sicher, dass Sie Firefox verwenden, da die Eigenschaft „font-size-adjust“ derzeit nur in Firefox als primärem Browser verfügbar ist.

Beispiel 1

In diesem Beispiel passen wir die Schriftgröße der Kleinbuchstaben auf die Hälfte der Standardschriftgröße der verschiedenen verwendeten Schriftfamilien an.

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

Nach dem Login kopieren

Beispiel 2

In diesem Beispiel passen wir die Schriftgröße der Kleinbuchstaben auf die Hälfte der Standardschriftgröße der verwendeten Standardschriftfamilie an.

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

Nach dem Login kopieren

Fazit

In diesem Artikel haben wir anhand zweier verschiedener Beispiele erfahren, was die Eigenschaft „font-size-adjust“ ist, und sie verwendet, um die Schriftgröße von Text in einem Dokument mithilfe von CSS automatisch anzupassen. Im ersten Beispiel passen wir die Schriftgröße der Kleinbuchstaben auf die Hälfte der Standardschriftgröße der benutzerdefinierten Schriftart an, und im zweiten Beispiel passen wir die Schriftgröße der Kleinbuchstaben auf die Hälfte der Standardschriftgröße an der Standardschriftart.

Das obige ist der detaillierte Inhalt vonWie kann ich die Schriftgröße mithilfe von CSS automatisch anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!