Heim >Web-Frontend >CSS-Tutorial >Wie verknüpfe ich CSS- und Schriftartdateien aus verschiedenen Ordnern in HTML?

Wie verknüpfe ich CSS- und Schriftartdateien aus verschiedenen Ordnern in HTML?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-28 12:26:14447Durchsuche

How to Link CSS and Font Files from Different Folders in HTML?

CSS- und Schriftartdateien ordnerübergreifend verknüpfen

In der gegebenen Ordnerstruktur besteht die Aufgabe darin, eine CSS-Datei und Schriftartdateien getrennt zu verknüpfen Ordner in eine HTML-Datei. Um dies zu tun:

Verknüpfen der CSS-Datei:

Öffnen Sie die HTML-Datei und fügen Sie die folgende Zeile in das Feld ein. Abschnitt:

<link href="../stylesheet.css" rel="stylesheet">

Diese Zeile gibt an, dass sich die Datei stylesheet.css einen Ordner oberhalb (rückwärts) von der HTML-Datei befindet.

Verknüpfen der Font-Face-CSS-Datei:

Um die Schriftart-CSS-Datei zu verknüpfen, fügen Sie in ähnlicher Weise die folgende Zeile zum hinzu. Abschnitt:

<link href="fonts/fontstyle.css" rel="stylesheet">

Diese Zeile zeigt auf die CSS-Datei „font-face“, die sich im Ordner „fonts“ befindet.

Verknüpfung der Schriftarten

Um die Schriftarten in der Datei „fontstyle.css“ zu verknüpfen, verwenden Sie das src-Attribut as folgt:

@font-face {
  font-family: 'Font1';
  src: url('../fonts/font1/font1.ttf') format('truetype');
  src: url('../fonts/font1/font1.svg') format('svg');
}

Dieser Code gibt an, dass sich die Schriftart Font1 im Ordner „fonts/font1“ befindet und sowohl eine TTF- als auch eine SVG-Version enthält.

Beachten Sie die folgenden Richtlinien, wenn Sie relative verwenden Dateipfade:

  • Beginnend mit „/“ kehrt zum Stammverzeichnis zurück.
  • Beginnend mit „../“ verschiebt ein Verzeichnis rückwärts.
  • Beginnend mit „../“ bewegt sich zwei Verzeichnisse rückwärts.
  • Um vorwärts zu gehen, beginnen Sie mit dem ersten Unterverzeichnis und bewegen Sie sich weiter vorwärts.

Das obige ist der detaillierte Inhalt vonWie verknüpfe ich CSS- und Schriftartdateien aus verschiedenen Ordnern in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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