CSS font-sizeEigenschaft

Beispiel

Legen Sie die Schriftgröße für verschiedene HTML-Elemente fest.

h1 {font-size:250%} h2 {font-size:200%} p {font-size:100%}

Selbst ausprobieren »

Eigenschaftsdefinition und Verwendungshinweise

Die Eigenschaft font-size wird verwendet, um die Schriftgröße festzulegen.

font-size bestimmt nicht nur die angezeigte Textgröße, sondern beeinflusst auchem、line-height、letter-spacingund andere damit zusammenhängende Typografie-Berechnungen.

Standardwert: mittel
Vererbt: ja
Version: CSS1
JavaScript-Syntax: object.style.fontSize="larger"
/*<absolute-size>, absoluter Größenwert*/ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; /*<relative-size>, relativer Größenwert*/ font-size: larger; font-size: smaller; /*<length>, Längenwert*/ font-size: 12px; font-size: 0.8em; /*<percentage>, Prozentwert*/ font-size: 80%; font-size: inherit;

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft unterstützt.

Eigenschaft
font-size 1.0 5.5 1.0 1.0 7.0

Grundlegende Konzepte

font-sizeWird verwendet, um die Schriftgröße des Textes innerhalb eines Elements festzulegen.

Die standardmäßige Root-Schriftgröße des Browsers ist normalerweise16px。

Das heißt, standardmäßightml { font-size: 100%; }normalerweise äquivalent zuhtml { font-size: 16px; }。

Dieser Standardwert dient als Berechnungsgrundlage für viele relative Einheiten.

Beispiel

/* Standard-Schriftgröße für die Seite festlegen */
html {
    font-size: 100%; /* Normalerweise äquivalent zu 16px, unter Berücksichtigung der Browsereinstellungen des Benutzers */
}

/* Textgröße des Body-Textes festlegen */
body {
    font-size: 16px; /* Übliche Basis-Schriftgröße für den Body-Text */
    line-height: 1.6; /* Einheitenlose Zeilenhöhe für einfachere Vererbung verwenden */
}

/* Überschriftengröße festlegen */
h1 {
    font-size: 2rem; /* Standardmäßig ungefähr 32px */
}

Es wird nicht empfohlen, die Schriftgröße des Wurzelelements willkürlich auf einen sehr kleinen Wert festzulegen, da dies die Schriftpräferenzen der Nutzer im Browser und das Barrierefreiheitserlebnis beeinträchtigen kann.

Häufige Werttypen für font-size

font-sizeEs können Schlüsselwörter, Längeneinheiten, Prozentwerte und Funktionen verwendet werden.

Verschiedene Werte eignen sich für verschiedene Szenarien.

Werttypen Beispiel Beschreibung Anwendbare Szenarien
Schlüsselwörter small、large Vom Browser anhand voreingestellter Verhältnisse berechnet. Geeignet für einfache Seiten und Szenarien, die den Standardeinstellungen des Nutzers folgen müssen.
Absolute Einheiten 16px、12pt Die Größe ist relativ fest und bietet eine starke Kontrollierbarkeit. Präzise Steuerung der Benutzeroberfläche und Druckstile.
Relative Einheiten 1rem、1.25em Berechnet relativ zum Elternelement oder Wurzelelement. Responsives Design und komponentenbasierte Seiten.
Viewport-Einheiten 4vw、3vmin Berechnet relativ zur Größe des Browser-Viewports. Große Überschriften, Präsentationsseiten und fluide Typografie.
CSS-Funktionen clamp()、calc() Berechnet die Schriftgröße dynamisch über Ausdrücke. Moderne responsive Typografie.

Schlüsselwortwerte

CSS bietet zwei Arten von Schriftgrößen-Schlüsselwörtern.

Eine Art sind absolute Größen-Schlüsselwörter, wie z. B.small、medium、large。

Die andere Art sind relative Größen-Schlüsselwörter, wie z. B.largerundsmaller。

Schlüsselwörter für absolute Größen

Schlüsselwörter für absolute Größen sind keine festen Pixelwerte, sondern vom Browser anhand der Standard-Schriftgröße berechnete Stufen.

Schlüsselwörter Ungefähre Werte bei der Standardgröße von 16px ratio Anwendbare Szenarien
xx-small ungefähr 9px 0.56-fach Sehr kleiner Anmerkungstext, nicht für Fließtext empfohlen.
x-small Etwa 10px 0.625x Fußnoten oder Zusatzinformationen.
small Etwa 13px 0.8-fach Hilfetext.
medium Etwa 16px 1x Standard-Fließtext.
large Etwa 18px 1.125x Kleine Überschriften oder hervorgehobener Text.
x-large Etwa 24px 1.5-mal Titel.
xx-large Etwa 32px 2x Große Überschrift.
xxx-large Etwa 48px 3x Display-Überschriften.

Schlüsselwörter für relative Größen

largerundsmallerSie skalieren relativ zur Schriftgröße des übergeordneten Elements nach oben oder unten.

Sie eignen sich für einfache Szenarien, in denen die Schriftgröße dem Elternelement folgen muss.

Beispiel

/* Die Schriftgröße des Elternelements beträgt 16px */
.parent {
    font-size: 16px;
}

/* larger wird relativ zum Elternelement hochskaliert, wobei das genaue Verhältnis vom Browser bestimmt wird */
.child-larger {
    font-size: larger;
}

/* smaller wird relativ zum Elternelement herunterskaliert, wobei das genaue Verhältnis vom Browser bestimmt wird */
.child-smaller {
    font-size: smaller;
}

Schlüsselwortwerte sind barrierefreundlicher, bieten aber weniger Kontrolle; in realen Projekten werden häufiger verwendetrem、emoderclamp()。

Absolute Einheiten

Absolute Einheitenwerte sind relativ fest und hängen nicht von der Schriftgröße des Elternelements ab.

Sie eignen sich für Oberflächen, die eine präzise Steuerung erfordern, oder für Druckstile.

Einheit Bedeutung Umrechnungsverhältnis Anwendbare Szenarien
px Logische CSS-Pixel. Die am häufigsten verwendete Längeneinheit auf Bildschirmen. Weboberflächen und Schriftgrößen von Komponenten.
pt Druckpunkt. 1pt = 1/72 Zoll, ungefähr 1.333px. Druckstil.
cm / mm Zentimeter / Millimeter. 1cm = 37.8px，1mm = 3.78px. Drucktypografie; wird selten auf Webseiten verwendet.
in Zoll. 1in = 96px. Druck- oder spezielle Größenumrechnung.
pc Pica. 1pc = 12pt = 16px. Traditionelle Typografie-Szenarien, selten auf Webseiten verwendet.

Beispiel

/* Umrechnungsbeziehungen absoluter Einheiten */
/* 1in = 96px = 2.54cm = 25.4mm = 6pc = 72pt */

/* Beim Drucken normalerweise pt verwenden */
@media print {
    body {
        font-size: 12pt;
    }
}

/* Bildschirmanzeigen verwenden normalerweise px, rem oder clamp() */
@media screen {
    body {
        font-size: 16px;
    }
}

Auf modernen Bildschirmen bezieht sich 1px normalerweise auf ein CSS-logisches Pixel, das nicht unbedingt einem physischen Pixel entspricht.

Relative Einheiten

Relative Einheiten werden dynamisch anhand eines Referenzwerts berechnet.

Sie sind die am häufigsten verwendeten Schriftgrößeneinheiten im modernen responsiven Design.

Einheit Referenzobjekt Beschreibung Typische Verwendung
em Die Schriftgröße des übergeordneten Elements oder des aktuellen Elements. verwendet fürfont-sizeBei Bezug auf das übergeordnete Element multiplizieren sie sich kumulativ, wenn sie verschachtelt werden. Lokale Komponentenskalierung.
rem WurzelelementhtmlSchriftgröße. Unbeeinflusst von Verschachtelung, was eine stabilere Berechnung ermöglicht. Websiteweites Schriftgrößensystem.
% Schriftgröße des übergeordneten Elements. Infont-sizeverhält sich ähnlichem。 Skaliert proportional zum übergeordneten Element.
ch Zeichen0die Breite. Wird häufiger zur Steuerung der Linienbreite verwendet. width: 60ch;
ex Die Höhe eines Kleinbuchstabens x. Wird erheblich vom Schriftdesign beeinflusst. Einige spezielle Typografie-Fälle.
lh Zeilenhöhe des Elements. Eine neue Einheit, die in CSS Values 4 hinzugefügt wurde. Abstand, der an der Zeilenhöhe ausgerichtet ist.

Der Unterschied zwischen em und rem

emin den Einstellungenfont-sizees wird relativ zur Schriftgröße des übergeordneten Elements berechnet.

Wenn mehrere Verschachtelungsebenen alle verwendenemwird die Schriftgröße Schicht für Schicht multipliziert.

remImmer relativ zur Schriftgröße des Wurzelelements berechnet, daher ist es stabiler.

Beispiel

/* Schriftgröße des Wurzelelements ist 16px */
html {
    font-size: 16px;
}

/* em wird von der Schriftgröße des übergeordneten Elements beeinflusst */
.outer {
    font-size: 1.5em; /* 16px × 1.5 = 24px */
}

.middle {
    font-size: 1.5em; /* 24px × 1.5 = 36px */
}

/* rem wird immer relativ zu html berechnet */
.outer-rem {
    font-size: 1.5rem; /* 16px × 1.5 = 24px */
}

.middle-rem {
    font-size: 1.5rem; /* 16px × 1.5 = 24px, nicht kumulativ multipliziert */
}

Infont-sizeAngewendet aufemBei Verwendung ist es relativ zur Schriftgröße des Elternelements; aber im selben ElementpaddingodermarginAngewendet aufemist es relativ zur Schriftgröße des Elements selbst.

Viewport-Einheiten

Viewport-Einheiten werden basierend auf der Größe des Browserfensters berechnet.

Sie eignen sich für die Umsetzung fluider Typografie, die sich mit der Bildschirmbreite ändert.

Die alleinige Verwendung von Viewport-Einheiten kann jedoch dazu führen, dass Text auf Smartphones zu klein und auf ultrabreiten Bildschirmen zu groß ist.

Einheit Bedeutung Beschreibung Typische Szenarien
vw 1% der Viewport-Breite. Je breiter der Viewport ist, desto größer ist die Schriftgröße. Responsive Überschriften.
vh 1% der Viewport-Höhe. Auf Mobilgeräten werden sie durch die Browser-Toolbar beeinflusst. Vollbild-Anzeigeseiten.
vmin vwundvh1% des kleineren Werts. Geeignet für die Handhabung sowohl des Quer- als auch des Hochformats. Adaptive große Überschriften.
vmax vwundvh1% des größeren Werts. Größerer Variationsgrad. Visuelles Design im Präsentationsstil.
svh / dvh / lvh Kleine / dynamische / große Viewport-Höhe. Wird verwendet, um das Problem sich ändernder Browser-Toolbars auf Mobilgeräten zu lösen. Mobile Vollbildseiten.
cqi / cqb Container-Query-Einheiten. Relativ zur Containergröße, nicht zum gesamten Viewport. Responsive Typografie auf Komponentenebene.

Beispiel

/* Wenn vw allein verwendet wird, kann die font-size-Skalierung zu aggressiv sein */
h1 {
    font-size: 5vw;
}

/* Es wird empfohlen, clamp() zu verwenden, um die oberen und unteren Grenzen festzulegen */
h1 {
    font-size: clamp(1.5rem, 5vw, 3.5rem);
}

/* Container-Query-Einheiten eignen sich für responsives Design auf Komponentenebene */
.card {
    container-type: inline-size;
}

.card-title {
    font-size: clamp(1rem, 4cqi, 2rem);
}

Container-Query-Einheiten eignen sich für Komponentenbibliotheken und Kartenlayouts, weil die Größe einer Komponente nicht unbedingt der Größe des Browser-Viewports entsprechen muss.

clamp()-Funktion

clamp()Sie ist eine sehr praktische Funktion in der modernen responsiven Typografie.

Sie kann die Schriftgröße zwischen einem Mindest- und einem Höchstwert begrenzen.

Der mittlere Wert verwendet normalerweise Viewport-Einheiten oder Berechnungsausdrücke, wodurch sich die Schriftgröße mit dem Bildschirm ändern kann.

Parameter Bedeutung Beispiel Beschreibung
Mindestwert Die Schriftgröße wird nicht kleiner als dieser Wert. 1rem Sorgt für Lesbarkeit auf mobilen Geräten.
bevorzugter Wert Der Browser versucht zuerst, diesen dynamischen Wert zu verwenden. 2vw + 1rem Ermöglicht, dass sich die Schriftgröße fließend mit dem Bildschirm ändert.
Höchstwert Die Schriftgröße wird nicht größer als dieser Wert sein. 3rem Verhindert, dass Text auf großen Bildschirmen zu groß wird.

Beispiel

/* clamp(minimal, bevorzugt, maximal) */
h1 {
    font-size: clamp(1.75rem, 2.5vw + 1rem, 3.5rem);
}

h2 {
    font-size: clamp(1.25rem, 2vw + 0.75rem, 2.25rem);
}

p {
    font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
}

/* Ein Design-System mit CSS-Variablen aufbauen */
:root {
    --text-sm: clamp(0.8rem, 1.5vw + 0.25rem, 0.95rem);
    --text-md: clamp(1rem, 2vw + 0.5rem, 1.25rem);
    --text-lg: clamp(1.25rem, 3vw + 0.5rem, 2rem);
    --text-xl: clamp(1.75rem, 4vw + 0.75rem, 3.5rem);
}

.article-title {
    font-size: var(--text-xl);
}

min()- und max()-Funktionen

min()Nimmt den kleinsten Wert aus mehreren Werten.

max()Nimmt den größten Wert aus mehreren Werten.

Sie können für die Schriftgröße verwendet werden, aber in der fluiden Typografie sind sie normalerweise nicht so gut wieclamp()intuitiv.

Funktion Verhalten Beispiel Anwendbare Szenarien
min() Den kleineren berechneten Wert auswählen. min(5vw, 48px) Nur das Maximum begrenzen.
max() Den größeren berechneten Wert auswählen. max(1rem, 2vw) Nur das Minimum begrenzen.
clamp() Minimale, bevorzugte und maximale Werte gleichzeitig festlegen. clamp(1rem, 2vw, 2rem) Eine vollständige Lösung für fluide Schriftgrößen.

Beispiel

/* Die Schriftgröße wird 48px nicht überschreiten, kann auf kleinen Bildschirmen aber zu klein sein */
h1 {
    font-size: min(5vw, 48px);
}

/* Die Schriftgröße wird nicht kleiner als 16px sein, kann auf großen Bildschirmen aber zu groß sein */
h2 {
    font-size: max(16px, 3vw);
}

/* Begrenzt sowohl den Minimal- als auch den Maximalwert, besser für echte Projekte geeignet */
h3 {
    font-size: clamp(16px, 3vw, 32px);
}

calc()-Funktion

calc()Verschiedene Einheiten können in Berechnungen innerhalb von CSS gemischt werden.

Es wird oft verwendet, um feste Werte mit relativen Werten zu kombinieren.

In Szenarien mit Schriftgröße,calc()oft mitvw、remWird zusammen verwendet.

Beispiel

/* calc() verwenden, um rem und vw zu kombinieren */
h1 {
    font-size: calc(1.5rem + 2vw);
}

/* Die Verwendung von calc() in clamp() macht den Code klarer */
h2 {
    font-size: clamp(1.25rem, calc(1rem + 2vw), 3rem);
}

/* Hinweis: Auf beiden Seiten des Operators müssen Leerzeichen beibehalten werden */
p {
    font-size: calc(1rem + 0.25vw);
}

calc(1rem+2vw)Diese Art von Syntax ist falsch; Leerzeichen sollten auf beiden Seiten des Operators geschrieben werden, z. B.calc(1rem + 2vw)。

Vererbung und Kaskade

font-sizeEs ist eine vererbte Eigenschaft.

Wenn ein Kindelement keine deklarierte Schriftgröße hat, erbt es die berechnete Schriftgröße des Elternelements.

Dies ist ebenfallsemEiner der Gründe, warum es beim Verschachteln leicht zu kumulativen Multiplikationsproblemen kommt.

Beispiel

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>font-size-Vererbungsbeispiel</title>
    <style>
        .article {
font-size: 18px; /* Untergeordnete Elemente erben diese Schriftgröße standardmäßig */
        }

        .article p {
font-size: 1em; /* entspricht 18px */
        }

        .article .note {
            font-size: 0.875em; /* 18px × 0.875 = 15.75px */
        }
    </style>
</head>
<body>
    <div class="article">
        <p>Dies ist ein Text.</p>
        <p class="note">Dies ist ein kleinerer Erklärungstext.</p>
    </div>
</body>
</html>

Best Practices

In realen Projekten ist es nicht empfehlenswert, den gesamten Text fest alspx。

Ein besserer Ansatz ist die Verwendung von Root-Schriftgröße, CSS-Variablen undclamp()Kombiniert zu einem stabilen Schriftgrößensystem.

Nicht empfohlen Empfohlene Vorgehensweise Grund
font-size: 12px;Wird für großen Fließtext verwendet. font-size: 1rem; Zu kleiner Fließtext kann das Leseerlebnis beeinträchtigen.
Alle Ebenen der Komponenten verwendenem。 Für globale Schriftgrößen verwenden Sierem, und für lokale Skalierung verwenden Sieem。 Vermeiden Sie, durch verschachtelte Multiplikation die Kontrolle über die Schriftgröße zu verlieren.
Nur Titelfont-size: 6vw;。 font-size: clamp(1.75rem, 4vw, 3.5rem); Verhindert, dass Text auf kleinen Bildschirmen zu klein und auf großen Bildschirmen zu groß ist.
Schriftgrößen willkürlich über verschiedene Seiten hinweg definieren. CSS-Variablen verwenden, um die Schriftgrößenskala zu vereinheitlichen. Erleichtert die Pflege eines konsistenten visuellen Systems.

Beispiel

/* Empfohlen: CSS-Variablen verwenden, um das Schriftgrößensystem zu verwalten */
:root {
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: clamp(1.5rem, 3vw, 2.5rem);
    --font-size-hero: clamp(2rem, 6vw, 4.5rem);
}

body {
    font-size: var(--font-size-base);
    line-height: 1.6;
}

.caption {
    font-size: var(--font-size-sm);
}

.article-title {
    font-size: var(--font-size-xl);
}

.hero-title {
    font-size: var(--font-size-hero);
}

Im Allgemeinen kann verwendet werdenremEin globales Schriftgrößensystem einrichten, verwendenemfür lokale proportionale Skalierung verwendenclamp()für responsive Überschriften.

Empfohlenes Schriftgrößenskala-System

Das Folgende ist ein font-size-Token-System, das auf dem Modular-Scale-Ansatz basiert.

Jedes Token verwendetclamp()Stellen Sie geeignete Größen sowohl auf den kleinsten als auch auf den größten Bildschirmen sicher.

Token Zweck Empfohlene clamp()-Werte Hinweise
--text-xs Labels, Badges clamp(0.7rem, 0.5vw + 0.5rem, 0.8rem) Es wird nicht empfohlen, unter 11px zu gehen.
--text-sm Hilfstext, Bildunterschriften clamp(0.85rem, 0.8vw + 0.6rem, 0.95rem) Häufig in Anmerkungen und sekundären Informationen zu sehen.
--text-md Body-Baseline clamp(1rem, 1vw + 0.75rem, 1.125rem) Empfohlen als Standard-Schriftgröße für den Fließtext.
--text-lg Untertitel clamp(1.15rem, 1.5vw + 0.8rem, 1.5rem) Unterüberschriften für Artikel oder Karten.
--text-xl Überschrift der Ebene h3 clamp(1.25rem, 2vw + 0.75rem, 2rem) Unterabschnittstitel.
--text-2xl Überschrift der Ebene h2 clamp(1.5rem, 2.5vw + 1rem, 2.5rem) Abschnittstitel.
--text-3xl Überschrift auf h1-Ebene clamp(2rem, 4vw + 1rem, 3.5rem) Haupttitel der Seite.
--text-hero Große Überschrift im Display-Stil clamp(2.5rem, 6vw + 1rem, 5rem) Titel der Homepage oder Landingpage.

Beispiel

/* Empfohlen: Verwenden Sie clamp() + CSS-Variablen, um das Schriftgrößensystem zu verwalten */
:root {
    --text-xs:   clamp(0.7rem, 0.5vw + 0.5rem, 0.8rem);
    --text-sm:   clamp(0.85rem, 0.8vw + 0.6rem, 0.95rem);
    --text-md:   clamp(1rem, 1vw + 0.75rem, 1.125rem);
    --text-lg:   clamp(1.15rem, 1.5vw + 0.8rem, 1.5rem);
    --text-xl:   clamp(1.25rem, 2vw + 0.75rem, 2rem);
    --text-2xl:  clamp(1.5rem, 2.5vw + 1rem, 2.5rem);
    --text-3xl:  clamp(2rem, 4vw + 1rem, 3.5rem);
    --text-hero: clamp(2.5rem, 6vw + 1rem, 5rem);
}

body {
    font-size: var(--text-md);
    line-height: 1.6;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
small { font-size: var(--text-sm); }

Empfohlene Vorgehensweisen und was zu vermeiden ist

Im Folgenden finden Sie mehrere Sammlungen empfohlener und nicht empfohlener Vorgehensweisen für häufige Szenarien.

Szenarien Nicht empfohlen Empfohlene Vorgehensweise
Einstellung der Root-Schriftgröße. html { font-size: 10px; } html { font-size: 100%; }
Body-Schriftgröße p { font-size: 14px; } p { font-size: 1rem; }
Schriftgröße für Überschriften h1 { font-size: 48px; } h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem); }
Kleiner Text small { font-size: 11px; } small { font-size: max(0.75rem, 12px); }
Responsive Schriftgröße. mit mehreren@mediaFeste Werte an Breakpoints umschalten Nutzungclamp()Flüssige Übergänge implementieren
Barrierefreiheit html { font-size: 62.5%; } Legen Sie die Root-Schriftgröße nicht fest oder verwenden Sie100%

nichthtmloderbodyOben fixiertpxDas Festlegen der Root-Schriftgröße überschreibt die vom Benutzer im Browser eingestellte bevorzugte Schriftgröße, wodurch die Barrierefreiheitsfunktion für großen Text fehlschlägt.

Herleitung der clamp()-Formel für flüssige Schriftgröße

clamp()Der mittlere Wert verwendet normalerweise Viewport-Einheiten plus eine rem-Basislinie.

Dies ergibt eine lineare Interpolationsformel aus "Anker + Steigung", die die Geschwindigkeit, mit der sich die Schriftgröße über verschiedene Bildschirmbreiten ändert, präzise steuert.

Schritte zur Formelableitung

Angenommen, die Schriftgröße muss zwischen Viewports von 320px und 1240px reibungslos von 16px auf 24px übergehen.

Schritte Formel Berechnung in diesem Beispiel
1. Steigung berechnen (max. px - min. px) / (max. vp - min. vp) (24 - 16) / (1240 - 320) = 0.00869, ungefähr 0.87vw
2. Achsenabschnitt berechnen Min. px - Steigung × min. vp 16 - 0.00869 × 320 = 13.2px, ungefähr 0.825rem
3. Bevorzugten Wert herleiten Steigung × 100vw + Achsenabschnitt 0.87vw + 0.825rem

Beispiel

/* Formel: preferred = slope × 100vw + intercept */
/* Slope = (max px - min px) / (max vp - min vp) */
/* Intercept = minimum px - slope × minimum vp */

/* Beispiel: Übergang von 16px zu 24px zwischen 320px und 1240px Viewport-Breite */
/* slope = (24-16) / (1240-320) = 0.00869 ≈ 0.87vw */
/* intercept = 16 - 0.00869×320 ≈ 13.2px ≈ 0.825rem */

p {
    font-size: clamp(1rem, 0.87vw + 0.825rem, 1.5rem);
}

clamp()Unterstützt in Chrome 79+, Firefox 75+, Safari 13.1+ und Edge 79+, daher ist die Verwendung in der Produktion sicher.

Ausführliche Erklärung der Funktionen min() und max()

min(a, b, ...)Gibt das Minimum mehrerer Werte zurück, was dem Festlegen einer „Obergrenze“ entspricht.

max(a, b, ...)Gibt das Maximum mehrerer Werte zurück, was dem Festlegen einer „Untergrenze“ entspricht.

Sie können beliebig viele Argumente annehmen, und unter den Argumenten können verschiedene Einheiten gemischt werden.

Funktion Verhalten Wirkung Anwendbare Szenarien
min() Den Mindestwert unter allen Parametern auswählen Obergrenze festlegen Verhindert, dass die Schriftgröße zu groß wird.
max() Den Höchstwert unter allen Parametern auswählen Untergrenze festlegen Sorgt für eine minimale lesbare Schriftgröße.
clamp() Begrenzt gleichzeitig den Mindestwert, den bevorzugten Wert und den Höchstwert. Ober- und Untergrenzen festlegen. Eine vollständige Lösung für fluide Schriftgrößen.

Beispiel

/* min() — Schriftgröße nicht größer als 2rem */
h2 {
    font-size: min(5vw, 2rem);
}

/* max() — Schriftgröße nicht kleiner als 1rem */
gering {
    font-size: max(0.75vw, 1rem);
}

/* Kombination: min und max sind äquivalent zu clamp */
/* clamp(MIN, VAL, MAX) ist äquivalent zu max(MIN, min(VAL, MAX)) */
h1 {
    font-size: max(1.5rem, min(4vw, 3rem));
}

/* Mehrere Parameter: nimmt das Minimum der drei */
.label {
    font-size: min(1rem, 3vw, 14px);
}

/* Gemischte Einheiten */
.fluid {
    font-size: max(12px, 1.2vw + 0.5rem);
}

Detaillierte Erklärung der calc()-Funktion

calc()Unterstützt die vier Grundrechenarten Addition, Subtraktion, Multiplikation und Division und kann beliebige Einheiten mischen.

In Schriftgrößen-Szenarien oft verwendet mitremundvwIn Kombination verwenden.

Regeln für arithmetische Operationen

Operation Syntax Grenzwert Beispiel
Addition calc(1rem + 0.5vw) Auf beiden Seiten des Operators müssen Leerzeichen stehen. font-size: calc(1rem + 0.5vw);
Subtraktion calc(2rem - 4px) Auf beiden Seiten des Operators müssen Leerzeichen stehen. font-size: calc(2rem - 4px);
Multiplikation calc(1.5 * 16px) Einer der Werte muss einheitenlos sein. font-size: calc(1.5 * 16px);
division calc(24px / 1.5) Die rechte Seite muss eine einheitenlose Zahl sein, und nicht 0. font-size: calc(24px / 1.5);

calc(1rem+2px)Ist eine falsche Syntax; Leerzeichen sollten auf beiden Seiten des Operators geschrieben werden, die korrekte Syntax istcalc(1rem + 2px)。

Beispiel

/* Grundlegende arithmetische Operationen */
font-size: calc(1rem + 0.5vw);       /* Addition */
font-size: calc(2rem - 4px);         /* Subtraktion */
font-size: calc(1.5 * 16px);         /* Multiplikation (einer muss eine einheitenlose Zahl sein) */
font-size: calc(24px / 1.5);         /* Division (die rechte Seite muss eine einheitenlose Zahl sein) */

/* Mit CSS-Variablen kombinieren */
:root {
    --scale: 1.25;
    --base: 1rem;
}
h3 {
    font-size: calc(var(--base) * var(--scale));
}

/* Verschachteltes calc (moderne Browser unterstützen das Weglassen des inneren calc) */
font-size: calc(clamp(1rem, 2vw, 2rem) * 0.8);

Verwenden Sie calc, um eine modulare Schriftgrößenskala aufzubauen

Durchcalc()Und mit CSS-Variablen können Sie eine font-size-Leiter basierend auf einem festen Verhältnis implementieren.

Das folgende Beispiel verwendet das Verhältnis der großen Terz (1.25).

Beispiel

/* Verwende calc + CSS-Variablen, um das Verhältnis der großen Terz (1.25) umzusetzen */
:root {
    --ratio: 1.25;
    --step-0: 1rem;                                       /* 16px */
    --step-1: calc(var(--step-0) * var(--ratio));         /* 20px */
    --step-2: calc(var(--step-1) * var(--ratio));         /* 25px */
    --step-3: calc(var(--step-2) * var(--ratio));         /* 31.25px */
    --step--1: calc(var(--step-0) / var(--ratio));        /* 12.8px */
}

p     { font-size: var(--step-0); }
h3    { font-size: var(--step-1); }
h2    { font-size: var(--step-2); }
h1    { font-size: var(--step-3); }
small { font-size: var(--step--1); }

Vererbung und Kaskade

font-sizeEs ist eine vererbte Eigenschaft.

Wenn ein Kindelement keine Schriftgröße explizit festlegt, erbt es den berechneten Wert des Elternelements, nicht den deklarierten Wert.

Berechnungsprozess erben

Nachfolgend sehen Sie eine typische font-size-Vererbungskette.

Selektoren deklarierter Wert Berechnungsergebnis Beschreibung
html 100% 16px Standardwert des Browsers.
body inherit 16px Von html geerbt.
.article 1.125rem 18px Basierend auf der Root-Schriftgröße berechnet.
.article p inherit 18px Vererbt wird der berechnete Wert 18px, nicht 1.125rem.
.article em 1em 18px emBasierend auf dem berechneten Wert des Elternelements: 1 × 18px = 18px.

Spezifität und Kaskadenreihenfolge

Wenn mehrere Regeln gleichzeitig festlegenfont-sizeBei Anwendung gelten die folgenden Prioritäten von hoch bis niedrig.

Rangfolge Source Beispiel
1 (höchste) !importantInline-Stil <p style="font-size: 20px !important">
2 !importantStylesheet-Regeln. p { font-size: 20px !important; }
3 Inline-Stil <p style="font-size: 18px">
4 ID-Selektor #title { font-size: 24px; }
5 Klassen- / Pseudoklassen- / Attributselektoren .heading { font-size: 22px; }
6 Element- / Pseudo-Element-Selektoren p { font-size: 16px; }
7 (niedrigste) Vererbte / Browser-Standardstile Stammt vom Elternelement oder aus Browser-Standardwerten.

Beispiel

/* Spezifität von hoch bis niedrig */
/* 1. !important Inline-Stil */
/* <p style="font-size: 20px !important"> */

/* 2. !important-Stylesheet-Regeln */
p { font-size: 20px⟦⟧!important !important; }

/* 3. Inline-Stil */
/* <p style="font-size: 18px"> */

/* 4. ID-Selektoren */
#title { font-size: 24px; }

/* 5. Klassen-/Pseudoklassen-/Attribut-Selektoren */
.heading { font-size: 22px; }

/* 6. Element-/Pseudoelement-Selektoren */
p { font-size: 16px; }

/* 7. Vererbung/Browser-Standardstile */

nichthtmloderbodyOben fixiertpxDas Festlegen der Root-Schriftgröße überschreibt die Schriftvoreinstellungen des Browsers des Benutzers. Bitte verwenden Siehtml { font-size: 100%; }Oder legen Sie sie einfach nicht fest.

Interaktive Demo

Durch die folgende Demo können Sie die font-size-Effekte unter verschiedenen Einheiten intuitiv sehen.

Wählen Sie den Einheitentyp und ziehen Sie den Werteschieberegler, und der Vorschaubereich wird in Echtzeit aktualisiert.

font-size-Einheitenumrechnung und Vorschau
16px
CSS font-size Tutorial Beispieltext

Zusammenfassung

font-sizeEs ist die grundlegende Eigenschaft des CSS-Typografiesystems.

pxGeeignet für präzise Kontrolle,remGeeignet für ein globales Schriftgrößensystem,emGeeignet für lokale Skalierung.

Viewport-Einheiten eignen sich für flüssige Typografie, aber am besten kombiniert man sie mitclamp()Begrenzen Sie die oberen und unteren Grenzen.

In echten Projekten wird empfohlen, CSS-Variablen zu verwenden, um Schriftgrößen einheitlich zu verwalten, wobei Lesbarkeit und responsives Erlebnis im Vordergrund stehen.

Empfohlen für Fließtext am Bildschirmrem + clamp(), für Druckstile verwendenpt。

Die Root-Schriftgröße nicht fixieren und für kleinen Text immer eine Mindestgrenze festlegen (empfohlen nicht unter 12px / 0.75rem).

Für Responsivität auf Komponentenebene Container-Query-Einheiten priorisierencqi / cqb。


Ähnliche Artikel

CSS-Tutorial:CSS-Schrift

CSS-Referenzhandbuch:font-Eigenschaft

Weitere Erweiterungen