Wie füge ich externe Schriftarten in CSS ein? CSS-Schriftstil-Einstellungsmethode (Beispiel)

Bei der Browseranzeige verbessern unterschiedliche Schriftarten auf der Seite nicht nur die Schönheit der Seite, sondern verbessern auch die Interaktivität des Benutzers beim Surfen. Wie werden diese verschiedenen Schriftarten mit CSS festgelegt? Dieses Kapitel zeigt Ihnen Wie füge ich externe Schriftarten in CSS ein? Methode zur Einstellung des CSS-Schriftartstils (Beispiel) . Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Welche Funktion und Verwendung hat das Attribut „font-family“?

1. Die Rolle des Attributs „font-family“

Mit dem Attribut „font-family“ können Sie CSS-Code verwenden, um den Schriftstil festzulegen für die Textanzeige auf der Seite. Zum Beispiel: Song Dynasty, Microsoft Yahei usw. Das Attribut „font-family“ legt verschiedene Schriftarten fest, um die Seitenanzeige einheitlicher und schöner zu gestalten.

Das Attribut „font-family“ kann mehrere Werte (Schriftarten) definieren, die durch Kommas getrennt sind. Wenn der Browser die erste Schriftart nicht unterstützt, versucht er es mit der nächsten, bis eine erkannt wird. Der Browser verwendet den ersten Wert, den er erkennt.

2. Verwendung des Schriftfamilienattributs

font-family:"设置字体名称";

Beispiel:

CSS-Code:

.demo{ font-family:"微软雅黑";}

HTML-Code:

<div class="demo">我是一段测试文字</div>

Auf diese Weise wird der gesamte Text im Demofeld im Microsoft Yahei-Schriftstil angezeigt.

2. Wie füge ich externe Schriftarten in CSS ein?

Zu den in allgemeinen Browsern häufig verwendeten Schriftarten gehören: Song Dynasty, Hei Body, Microsoft Yahei usw. Denn wenn die Webseite geladen und die Schriftart ausgewählt wird, wird die Textschriftart der Systemtextbibliothek des Besuchers aufgerufen. Wenn die Schriftart nicht gefunden wird, wird die Standard-Webschriftart angezeigt. Das von jedem installierte Betriebssystem verfügt standardmäßig über diese Schriftarten, daher werden diese Schriftarten auch als sichere Schriftarten bezeichnet. Für besondere Anforderungen können wir jedoch auf einige externe Schriftarten verweisen, um personalisierte und ansprechende Textstile anzuzeigen.

So führen Sie externe Schriftarten (@font-face) in CSS ein:

1. @font-face-Tag-Einführung

@font-face ermöglicht Ihnen die Verwendung von Schriftarten, die nicht auf Ihrem Computer installiert sind, in Webseiten, wodurch die Einschränkungen sicherer Schriftarten vollständig beseitigt werden. Installieren Sie einfach das Schriftartenpaket auf dem Server. Wenn der Benutzer die Webseite lädt, wird das Schriftartenpaket automatisch auf den Computer des Benutzers heruntergeladen, um sicherzustellen, dass die Schriftarten korrekt gerendert werden können.

2. Schritte zum Einführen externer Schriftarten in CSS

1) Führen Sie die Schriftart in CSS ein und passen Sie einen Namen für die externe Schriftart

@font-face {
    /* font-properties */
    font-family: 用户自定义的字体名称;
    src:url('加载外部字体文件的文件地址'),  
    url('加载外部字体文件的文件地址'),
    url('加载外部字体文件的文件地址'); /* IE9 */
}

an - Familie definiert den Namen der Schriftart, und die folgende Quelle ist der Speicherort, an dem die Schriftartdatei geladen wird. Der Grund, warum es mehrere URLs gibt, sind Probleme mit der Browserkompatibilität.

2) Verwenden Sie die gerade definierte Schriftart

div {
    font-family: 用户自定义的字体名称;
}

Codebeispiel:

@font-face {
	 font-family: 'YaHei Consolas Hybrid';
	src: url('../fonts/yaheiconsolashybrid.ttf');
}

body {
	font-family: 'YaHei Consolas Hybrid';
	font-size: 16px;
}

Berücksichtigen Sie, dass die Formate der Schriftarten in verschiedenen Browsern unterschiedlich sind (Kompatibel mit Browsern)

/*字体后缀和浏览器有关，如下所示
* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera 
* .EOT，适用于Internet Explorer 4.0+ 
* .SVG，适用于Chrome、IPhone 
*/
@font-face {
    font-family: 'HansHandItalic';
    src: url('fonts/hanshand-webfont.eot');
    src: url('fonts/hanshand-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/hanshand-webfont.woff') format('woff'),
         url('fonts/hanshand-webfont.ttf') format('truetype'),
         url('fonts/hanshand-webfont.svg#webfont34M5alKg') format('svg');
    font-weight: normal;
    font-style: normal;
}

3. Vorteile der Einführung externer Schriftarten in CSS:

Mit der anhaltenden Beliebtheit von @font -face , was zu vielen neuen Symbolsätzen für Schriftartformate führt, die als Web-Schriftarten bezeichnet werden. Diese Web-Schriftarten haben gegenüber gewöhnlichen sicheren Schriftarten die folgenden Vorteile:

1) Sie verwenden echten Text anstelle von Bildern. Das Vergrößern und Verkleinern hat keinen Einfluss auf den Rendering-Effekt und das Benutzererlebnis ist gut 🎜>2) Kann von Suchmaschinen erkannt werden;

3) Im Gegensatz zu Bildern, die jedes Mal neu generiert werden müssen, ist das Hinzufügen und Löschen bequemer.

Das obige ist der detaillierte Inhalt vonWie füge ich externe Schriftarten in CSS ein? CSS-Schriftstil-Einstellungsmethode (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!