In der Lage zu sein, verschiedene Aspekte Ihrer HTML-Seite zu gestalten, ist eine wichtige Fähigkeit für Webdesigner und Entwickler. Um Ihre HTML-Webseiten mit Schriftfarben und -größen zu gestalten, müssen Sie mit CSS vertraut sein. Um die Schriftgröße gezielt anzusprechen, können Sie das CSS verwenden Schriftgröße Eigentum.

Wenn Sie nach einer Möglichkeit suchen, die HTML-Schriftgröße mit CSS zu ändern, sind Sie bei uns genau richtig. Beginnen wir mit einer Einführung in CSS Schriftgröße Eigentum.

Verständnis der CSS-Eigenschaft font-size

Der Schriftgröße -Eigenschaft in CSS ist praktisch, wenn Sie die Größe von HTML-Text ändern müssen. Sie können diese Eigenschaft verwenden, um die Größe jedes Textteils auf einer HTML-Seite zu ändern oder bestimmte Elemente zu ändern.

Es wird normalerweise empfohlen, auf bestimmte Elemente abzuzielen, da Sie normalerweise nicht möchten, dass alles die gleiche Größe hat. Text, der keiner visuellen Hierarchie folgt, ist schwer zu durchsuchen und Überschriften auf höherer Ebene von Überschriften auf niedriger Ebene zu unterscheiden.

Einfacher ausgedrückt, missbrauchen Sie die nicht Schriftgröße Eigentum. Wenn Sie möchten, dass eine Überschrift hervorsticht, gibt es dafür verschiedene HTML-Überschrift-Tags. Schauen Sie sich unsere an HTML-Essentials-Spickzettel für verschiedene Tags, Attribute und mehr zusammen mit Erklärungen.

Das CSS Schriftgröße Eigenschaft nimmt zwei Arten von Werten an: absolut und relativ.

Absolute Längenwerte (d.h. px) sind fest, während relative (z. em und Ex) sind flexibel. Zum Beispiel für eine Schriftart-relative Einheit wie em, wird die Größe normalerweise durch die Schriftgröße des übergeordneten Elements bestimmt. Root-basierte schriftartbezogene Einheiten wie Rest werden von der Schriftgröße des Root-Elements beeinflusst ().

Jeder hat seine Vor- und Nachteile, aber um die Dinge auf den Punkt zu bringen, werden wir sie in diesem Artikel nicht diskutieren.

So ändern Sie die Schriftgröße eines HTML-Elements in CSS

Sie können die Schriftgröße von HTML-Text ändern, indem Sie eine Standard-CSS-Syntax verwenden.

Geben Sie zuerst den Selektor (den Text, den Sie ändern möchten) an und öffnen Sie einige geschweifte Klammern. Als nächstes geben Sie die ein Schriftgröße -Eigenschaft, gefolgt von einem Doppelpunkt, geben Sie die spezifische Größe an, in der Ihr HTML-Text angezeigt werden soll, und schließen Sie ihn mit einem Semikolon ab.

Hier ist die Syntax:

CSS-Selektor {
 Schriftgröße: Wert;
}

Um das Konzept besser zu verstehen, sehen Sie sich den folgenden HTML-Boilerplate an, der einige zusätzliche Codezeilen (eine Überschrift und einen Absatz) enthält:

Das ist meine erste Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Wenn Sie die Schriftgröße des Absatzelements ändern möchten, müssen Sie es auswählen (über eine Klasse, ein Tag oder eine ID) und mithilfe des CSS Schriftgröße legen Sie einen benutzerdefinierten Wert mit Ihren bevorzugten Einheiten fest. In unserem Beispiel verwenden wir Pixel (px).

P {
 Schriftgröße: 18px;
}

Obwohl Inline-CSS in großen Projekten im Allgemeinen nicht empfohlen wird, können Sie es auch verwenden, um die Größe von HTML-Text zu ändern. Wenn wir uns Notizen aus dem obigen externen CSS-Code nehmen, können wir dasselbe inline wie folgt implementieren:

Das ist meine erste Überschrift

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Texte im P HTML-Tag hat jetzt eine neue benutzerdefinierte Größe.

Verwandt: Wichtige CSS-Tipps und Tricks, die jeder Entwickler kennen sollte

Fehlerbehebung bei Fehlern beim Ändern der HTML-Schriftgröße in CSS

Während der gesamte Prozess der Änderung der Textgröße in CSS einfach erscheinen mag, läuft er möglicherweise nicht immer genau so ab, wie Sie es erwarten. Wenn Probleme auftreten, überprüfen Sie zunächst, ob Sie die Änderungen in Ihrer Datei gespeichert haben (stellen Sie außerdem sicher, dass Sie Ihr CSS-Blatt mit Ihrer HTML-Datei verknüpfen). Wenn ja, versuchen Sie es mit der Inline-Methode und aktualisieren Sie dann die Seite.

Wenn es funktioniert, liegt möglicherweise ein Problem mit Ihrem CSS-Code vor. Versuchen Sie es mit der !wichtig -Tag, und wenn es funktioniert, muss es einen widersprüchlichen Code geben. Analysieren Sie Ihren CSS-Code Zeile für Zeile, um zu versuchen, diesen Fehler abzufangen.

10 einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen können

Benötigen Sie Hilfe mit CSS? Probieren Sie zunächst diese grundlegenden CSS-Codebeispiele aus und wenden Sie sie dann auf Ihre eigenen Webseiten an.

Lesen Sie weiter

Über den Autor