So legen Sie die Schriftart in der CSS-Schriftart fest

CSS ist eine Stylesheet-Sprache für Webdesign. Sie ermöglicht Entwicklern eine bequemere Steuerung des Stils und Layouts von Webseiten, einschließlich der Schriftarteinstellungen. In diesem Artikel erfahren Sie, wie Sie CSS-Schriftarten festlegen, um schöne, lesbare und vielfältige Webdesigns zu erstellen.

1. Grundkenntnisse über Schriftarteinstellungen

In CSS werden Schriftarten normalerweise durch vier Attributwerte definiert: Schriftfamilie, Schriftstärke, Kursivschrift und Schriftgröße. Sie entsprechen den vier CSS-Eigenschaften „font-family“, „font-weight“, „font-style“ und „font-size“.

1. Schriftfamilie (Schriftfamilie)

Eine Schriftfamilie bezieht sich auf eine Sammlung von Schriftarten, auch Schriftfamilie genannt. Der Text auf der Webseite kann alle auf der Website installierten Schriftarten oder auf dem Computer des Benutzers installierte Schriftarten verwenden.

In CSS können Sie Text auf einer Webseite formatieren, indem Sie eine oder mehrere Schriftfamilien angeben. Zum Beispiel:

body {
  font-family: Arial, sans-serif;
}

Der obige Stil zeigt an, dass Sie die Schriftfamilie des Textinhalts auf Arial einstellen möchten, eine universelle westliche serifenlose Schriftart. Wenn die Schriftart Arial nicht auf dem Computer des Benutzers installiert ist, sucht das System stattdessen nach einer serifenlosen Schriftart, bei der es sich um eine allgemeine serifenlose Schriftartenfamilie wie Helvetica oder Verdana handelt.

2. Font-weight

Font-weight definiert die Dicke der Schriftart. In CSS kann die Stärke einer Schriftart als „normal“ (Standard), „bold“ (fett) oder mithilfe eines numerischen Werts zur Angabe der Stärke angegeben werden. Zum Beispiel:

h1 {
  font-weight: 700;
}

Der obige Stil setzt die Schriftstärke der Überschrift h1 auf „700“, was bedeutet, dass sie immer dicker wird.

3. Kursiv (Schriftstil)

Kursiv definiert, ob die Schriftart schräg ist oder nicht. In CSS kann die Kursivschrift mit „normal“ (Standard), „italic“ (kursiv) oder „oblique“ (kursiv) eingestellt werden. Zum Beispiel:

em {
  font-style: italic;
}

Der obige Stil stellt die em-Tags im Text kursiv dar.

4. Schriftgröße (font-size)

Die Schriftgröße bezieht sich auf die Größe des Textes. In CSS kann die Schriftgröße mithilfe von Einheiten wie Pixel (px), Prozentsatz (%), em oder rem (basierend auf der relativen Größe des Stammelements) angegeben werden. Zum Beispiel:

p {
  font-size: 16px;
}

Der obige Stil legt die Schriftgröße des Texts auf 16 Pixel (px) fest.

2. Weitere Schriftarteinstellungen

Zusätzlich zu Schriftfamilie, Schriftstärke, Kursivschrift und Schriftgröße bietet CSS auch einige andere Schriftarteinstellungen für eine detailliertere Steuerung.

1. Schriftstil (font-style)

CSS stellt das Attribut „font-style“ bereit, mit dem jeweils definiert werden kann, ob die Schriftart kursiv, normal und kursiv ist. Zum Beispiel:

font-style: italic normal oblique;

2. Schriftvariante (font-variant)

Das Attribut „font-variant“ wird verwendet, um die Variante der Schriftart zu steuern, z. B. „Kapitälchen“ (Kapitälchen) und „normal“ (normal). ), usw. Zum Beispiel:

font-variant: small-caps;

3. Texttransformation (Texttransformation)

Das Texttransformationsattribut wird verwendet, um den Transformationsstil von Text zu steuern, z. B. „Großbuchstaben“ (Großbuchstaben) und „Kleinbuchstaben“ (Kleinbuchstaben) usw. Zum Beispiel:

text-transform: uppercase;

4. line-height Die Eigenschaft

line-height wird verwendet, um die Höhe einer Textzeile zu steuern. Zum Beispiel: Die Eigenschaft

line-height: 1.5;

5. letter-spacing

letter-spacing kann den Abstand zwischen Buchstaben vergrößern oder verkleinern. Zum Beispiel:

letter-spacing: 2px;

3. Benutzerdefinierte Schriftarten

In CSS können Sie nicht nur die Schriftarten verwenden, die bereits auf Ihrem Computer installiert sind, sondern Sie können der Webseite auch mehr Persönlichkeit und Vielfalt verleihen, indem Sie benutzerdefinierte Schriftarten verwenden. Lassen Sie uns vorstellen, wie Sie benutzerdefinierte Schriftarten verwenden.

1. Verwendung von @font-face

Mit der @font-face-Regel können Sie benutzerdefinierte Schriftarten verwenden. Sie können Schriftartdateien zur Verwendung in Webseiten in CSS laden.

@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.ttf");
}

Der obige CSS-Code lädt die MyFont-Schriftart mit dem Pfad „/fonts/myfont.ttf“. Benutzer müssen die Schriftartdatei herunterladen, bevor der Text auf der Webseite korrekt angezeigt werden kann.

2. Schriftfamilie angeben

Wenn Sie @font-face-Regeln erstellen, müssen Sie den Namen der Schriftfamilie angeben. Sie können diesen Namen verwenden, um Text auf Ihrer Webseite zu formatieren. Zum Beispiel:

h1 {
  font-family: "MyFont", sans-serif;
}

Der obige Stil legt die Schriftart des Texts auf MyFont fest und verwendet die serifenlose Schriftfamilie, wenn der Benutzer MyFont nicht installiert hat.

4. Zusammenfassung

CSS-Schriftart ist ein wichtiger Aspekt des Webdesigns. Sie kann Webentwicklern dabei helfen, das Erscheinungsbild und die Präsentation von Webseiten zu steuern. Durch die Verwendung von Eigenschaften wie Schriftfamilie, Schriftstärke, Kursivschrift und Schriftgröße sowie benutzerdefinierten Schriftarten und anderen CSS-Eigenschaften können Sie farbenfrohe Webdesigns erstellen und Benutzern ein besseres Leseerlebnis bieten.

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