Heim > Artikel > Web-Frontend > Wie kann ich die Schriftgröße mithilfe von CSS automatisch anpassen?

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

PHPznach vorne: 2023-09-15 22:13:021506Durchsuche

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

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

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>

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!

firefox css

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So gestalten Sie die Farbe, Größe und den Schatten von Symbolen mithilfe von CSSNächster Artikel：So gestalten Sie die Farbe, Größe und den Schatten von Symbolen mithilfe von CSS

In Verbindung stehende Artikel

Mehr sehen