Heim >Web-Frontend >CSS-Tutorial >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:021576Durchsuche
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!