Heim > Web-Frontend > Front-End-Fragen und Antworten > So legen Sie die Schriftart Microsoft Yahei in CSS fest

So legen Sie die Schriftart Microsoft Yahei in CSS fest

PHPz
Freigeben: 2023-04-24 09:54:59
Original
3602 Leute haben es durchsucht

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache für Webdesign, mit der verschiedene visuelle Effekte auf Webseiten gesteuert werden können. Unter ihnen sind Schriftarten eines der grundlegendsten und wichtigsten Elemente im Webdesign.

Microsoft Yahei ist eine ganz hervorragende Schriftart mit hervorragender Lesbarkeit, klaren Linien und komfortablen Schriftarten. In diesem Artikel erfahren Sie, wie Sie die Microsoft Yahei-Schriftart in CSS für die Verwendung auf Webseiten festlegen.

Deklarieren Sie zunächst das CSS-Stylesheet am Kopf der Webseite. Sie können den folgenden Code verwenden:

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
Nach dem Login kopieren

Die Font Awesome-Schriftartenbibliothek wird hier verwendet. Sie können Microsoft Yahei-Schriftarten direkt auf der Webseite verwenden Schriftartdatei.

Als nächstes können Sie den folgenden Code verwenden, um die Schriftart in CSS festzulegen:

body {
  font-family: "微软雅黑", sans-serif;
}
Nach dem Login kopieren

In diesem Beispiel setzen wir die Schriftfamilie auf „Microsoft Yahei“, und dieser Wert entspricht dem angegebenen Schriftartnamen. In diesem Beispiel wird auch die Fallback-Schriftartfamilie auf „sans-serif“ gesetzt (dieser Wert ist eine generische Schriftartenklasse, die der Browser automatisch verwendet, wenn die angegebene Schriftart nicht verfügbar ist).

In dieser CSS-Regel wenden wir Stileinstellungen auf das „body“-Element an. Dadurch wird der gesamte Text in der angegebenen Schriftart gerendert, einschließlich Textkörper und Überschriften.

Wenn Sie Stile auf ein bestimmtes Element statt auf das gesamte Dokument anwenden möchten, können Sie dessen Selektor verwenden. Die folgende Stilregel führt beispielsweise dazu, dass der gesamte Text im Header-Element die Microsoft Yahei-Schriftart verwendet:

header {
  font-family: "微软雅黑", sans-serif;
}
Nach dem Login kopieren

Zusätzlich zur Einstellung der Schriftfamilie können Sie auch die Schriftgröße, -stärke, -farbe usw. festlegen. Der folgende Code legt beispielsweise die Schriftgröße des Textes auf 18 Pixel, die Schriftstärke auf Normal und die Farbe auf Schwarz fest:

body {
  font-size: 18px;
  font-weight: normal;
  color: #000000;
}
Nach dem Login kopieren

Wobei das Attribut „font-size“ die Schriftgröße und das Attribut „font-weight“ die Schriftgröße festlegt Schriftstärke (einstellbar „bold“ bedeutet fett, „normal“ bedeutet normale Schriftart) und das Attribut „color“ legt die Schriftfarbe fest.

Wenn wir die Microsoft Yahei-Schriftart in CSS verwenden, können wir auch weitere Attribute verwenden, um den Stil und das Layout der Schriftart zu steuern, wie zum Beispiel: Buchstabenabstand (Buchstabenabstand), Zeilenhöhe (Zeilenhöhe), Textausrichtung (Text). horizontal ausgerichtet) und so weiter.

Kurz gesagt, die Verwendung von CSS zum Festlegen der Microsoft Yahei-Schriftart ist eine grundlegende und wichtige Fähigkeit. Die Beherrschung dieser Fähigkeit kann Ihr Webdesign professioneller und schöner machen. Ich hoffe, dass Sie durch die Einleitung dieses Artikels zunächst wissen, wie Sie die Microsoft Yahei-Schriftart in CSS festlegen.

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage