So ändern Sie den Schriftstil über HTML und CSS

Im Webdesign sind Schriftarten einer der sehr wichtigen Faktoren. Eine gute Schriftartenauswahl kann die Lesbarkeit und visuelle Wirkung einer Webseite verbessern. HTML bietet viele Schriftarten zur Auswahl und Schriftarten können auch über CSS geändert werden. In diesem Artikel erfahren Sie, wie Sie Schriftstile über HTML und CSS ändern.

1. Schriftauswahl in HTML

In HTML stehen viele Schriftarten zur Auswahl. Hier sind ein paar Beispiele für gängige Schriftarten:

<p style="font-family: Arial, sans-serif;">这里是Arial字体。</p>
<p style="font-family: "Times New Roman", serif;">这里是Times New Roman字体。</p>
<p style="font-family: Verdana, Geneva, sans-serif;">这里是Verdana字体。</p>
<p style="font-family: Impact, Charcoal, sans-serif;">这里是Impact字体。</p>

Im obigen Beispiel haben wir das Attribut „font-family“ verwendet, um die Schriftart anzugeben. Hier haben wir vier Schriftarten angegeben: Arial, Times New Roman, Verdana und Impact, die unterschiedlichen Stilen entsprechen. Es ist zu beachten, dass, wenn Sie dieselben Stile in CSS-Dateien definieren, diese Stile die in HTML-Tags festgelegten Stile überschreiben.

2. Schriftstile in CSS definieren

In CSS können wir Schriftstile über die Eigenschaft „font-family“ definieren. Zum Beispiel:

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

Hier definieren wir die Standardschriftart für die gesamte Seite als Arial. Wenn die Schriftart Arial nicht geladen werden kann, wird stattdessen die serifenlose Schriftart verwendet.

Zusätzlich zum Attribut „font-family“ können Sie den Schriftstil auch über andere Attribute ändern. Hier sind einige allgemeine Attribute:

• Schriftgröße: Definieren Sie die Schriftgröße, z. B. 12 Pixel, 14 Pixel usw.
• Schriftstil: Definieren Sie den Schriftstil, einschließlich normal, kursiv, kursiv usw.
• Schriftstärke: Definieren Sie die Stärke der Schriftart, z. B. normal, fett, fetter usw.
• Linienhöhe: Definieren Sie die Zeilenhöhe, die eine Zahl oder ein Prozentsatz sein kann.

Diese Eigenschaften können kombiniert werden, um verschiedene Schrifteffekte zu erzeugen. Zum Beispiel:

h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
}

Hier definieren wir die Schriftart des h1-Titels als Arial, die Schriftgröße als 24px, die Schriftstärke als fett und die Zeilenhöhe als 1,5-fach.

3. Web-Schriftarten verwenden

Zusätzlich zur Verwendung der integrierten Schriftarten des Systems können wir auch Web-Schriftarten verwenden. Web-Schriftarten sind ein Schriftformat, das direkt im Browser verwendet werden kann. Zu den gängigen Formaten gehören WOFF, WOFF2, TTF und OTF. Durch die Verwendung von Web-Schriftarten können Sie Ihren Schriftarten Abwechslung und Einzigartigkeit verleihen.

Um Web-Schriftarten zu verwenden, können wir @font-face-Regeln in CSS deklarieren. Beispiel:

@font-face {
  font-family: MyWebFont;
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff');
}

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

Hier deklarieren wir zunächst eine Schriftart mit dem Namen „MyWebFont“ und geben dann die Adresse der Schriftartdatei über das src-Attribut an. Wenn wir die Eigenschaft „font-family“ verwenden, können wir mehrere Schriftarten verwenden, indem wir sie durch Kommas trennen. Wenn der Browser in diesem Beispiel die Webschrift nicht laden kann, wird stattdessen die Arial-Schriftart im System verwendet.

4. Probleme mit dem Urheberrecht von Schriftarten

Bei der Verwendung benutzerdefinierter Schriftarten müssen wir auf die Probleme mit dem Urheberrecht von Schriftarten achten. Wenn das Urheberrecht der Schriftart die Verwendung im Web nicht zulässt, können wir die Schriftart nicht auf der Webseite verwenden.

Es stehen uns jetzt viele kostenlose Schriftarten zur Verfügung, z. B. Google Fonts und DaFont usw. Über diese Websites können wir schnell passende Schriftarten finden und diese in CSS aufrufen.

5. Zusammenfassung

Schriftarten spielen eine wichtige Rolle im Webdesign. Mithilfe von HTML und CSS können wir den Stil und das Erscheinungsbild von Schriftarten einfach anpassen. Bei der Auswahl einer Schriftart sind Aspekte der Lesbarkeit und des Urheberrechts zu berücksichtigen. Die Verwendung von Web-Schriftarten kann die Vielfalt erhöhen, Sie müssen jedoch auf die Urheberrechtsfragen der Schriftarten achten.

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Schriftstil über HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!