So legen Sie die Textgröße in CSS fest

Beim Webdesign ist die Textgröße eines der sehr wichtigen Elemente. Sie können die Lesbarkeit Ihrer Webseiten verbessern, indem Sie die Textgröße anpassen und so den Inhalt leichter lesbar machen. In HTML kann die Textgröße mithilfe von CSS (Cascading Style Sheets) festgelegt werden. Hier sind einige gängige Einstellungen für die CSS-Textgröße.

1. Verwenden Sie absolute Einheiten

Absolute Einheiten in CSS umfassen Pixel (px), Punkte (pt), Zoll (in), Zentimeter (cm) usw. Sie können diese Einheiten verwenden, um beim Festlegen der Textgröße bestimmte Pixelwerte oder tatsächliche Abmessungen anzugeben.

Sie können beispielsweise den folgenden Code verwenden, um die Textgröße des Absatzes auf 16 Pixel festzulegen:

p {
Schriftgröße: 16px;
}

Auf diese Weise werden alle Absätze mit 16 Pixel angezeigt.

Wenn Sie die Textgröße auf die tatsächliche Größe einstellen möchten, können Sie Zoll, Zentimeter usw. verwenden. Der folgende Code legt beispielsweise die Textgröße des Absatzes auf 2 Zoll fest:

p {
font-size: 2in;
}

Hier ist zu beachten, dass die Festlegung der Textgröße in tatsächlichen Größeneinheiten davon betroffen ist durch den Einfluss der Bildschirmauflösung und der Gerätegröße. Daher kann die Textgröße auf verschiedenen Geräten variieren.

2. Verwenden Sie relative Einheiten

Zusätzlich zu absoluten Einheiten unterstützt CSS auch relative Einheiten. Die Größe relativer Einheiten ist relativ zur Größe des übergeordneten Elements. Zu den üblichen relativen Einheiten gehören em, rem, %, usw.

1. em

em ist eine relative Einheit zum Festlegen der Textgröße relativ zur Schriftgröße des aktuellen Elements. Der folgende Code legt beispielsweise die Schriftgröße des Absatzes auf das 1,5-fache der Schriftgröße des übergeordneten Elements fest:

p {

font-size: 1.5em;

}

Wenn die Schriftgröße des übergeordneten Elements 16 Pixel beträgt, beträgt die Schriftgröße des Absatzes 24 Pixel (16). *1,5).

2. rem

rem ist eine relative Einheit zum Festlegen der Textgröße relativ zur Schriftgröße des Stammelements (d. h. des HTML-Elements). Zum Beispiel:

html {
Schriftgröße: 16px;
}

Auf dieser Grundlage setzt der folgende Code die Absatzschriftgröße auf das 1,5-fache der Schriftgröße des Stammelements:

p {
Schriftgröße: 1.5rem ;
}

Wenn die Schriftgröße des Stammelements 16 Pixel beträgt, beträgt die Schriftgröße des Absatzes 24 Pixel (16*1,5).

Im Vergleich zu em ist rem praktischer, da es nicht von der Schriftgröße des übergeordneten Elements beeinflusst wird, sondern relativ zum Stammelement der gesamten Seite berechnet wird.

3. %

% ist auch eine relative Einheit zum Festlegen der Textgröße relativ zur Größe des übergeordneten Elements. Der folgende Code setzt beispielsweise die Schriftgröße des Absatzes auf 150 % der Schriftgröße des übergeordneten Elements:

p {
Schriftgröße: 150 %;
}

Wenn die Schriftgröße des übergeordneten Elements 16 Pixel beträgt, dann beträgt die Schriftgröße des Absatzes 24 Pixel (16*1,5).

3. Verwenden Sie Schlüsselwörter

Zusätzlich zu bestimmten Größeneinheiten unterstützt CSS auch einige Schlüsselwörter zum Festlegen der Textgröße. Zu den häufig verwendeten Schlüsselwörtern gehören „klein“, „mittel“ und „groß“.

Zum Beispiel setzt der folgende Code die Textgröße des Absatzes auf mittel:

p {
font-size: medium;
}

Auf diese Weise wird die Textgröße des Absatzes entsprechend den Standardeinstellungen des Browsers angepasst.

4. Zusammenfassung

Im Webdesign ist die Textgröße eines der sehr wichtigen Elemente. Über CSS lässt sich Text entsprechend den Designanforderungen in unterschiedlichen Größen einstellen. Sie können es mithilfe von Pixeln, tatsächlicher Größe, em, rem, %, Schlüsselwörtern usw. festlegen und entsprechend der spezifischen Situation auswählen.

Das obige ist der detaillierte Inhalt vonSo legen Sie die Textgröße in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!