Wie verknüpfe ich externe CSS- und Schriftartdateien aus verschiedenen Ordnern in der Webentwicklung?

Verknüpfen externer Assets in Dateiverzeichnissen

Eine häufige Herausforderung bei der Webentwicklung besteht darin, externe Ressourcen wie Stylesheets und Schriftarten zu verknüpfen, wenn sich ihre Speicherorte unterscheiden das Haupt-HTML-Dokument. In diesem Artikel untersuchen wir die Techniken zum Verknüpfen dieser Assets in Szenarien, in denen sie sich in separaten Ordnern befinden.

Verknüpfen einer CSS-Datei aus einem anderen Ordner

Zum Verknüpfen Um ein Stylesheet aus einem anderen Ordner zu erstellen, verwenden Sie die folgende Syntax:

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

Ersetzen Sie „Dateipfad“ durch den relativen Pfad zur CSS-Datei. Wenn sich die CSS-Datei beispielsweise in einem Ordner mit dem Namen „styles“ im Ordner „assets“ befindet, wäre der Pfad:

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

Verknüpfen einer Font-Face-CSS-Datei

Um eine Schriftart-CSS-Datei aus einem anderen Ordner zu verknüpfen, gehen Sie ähnlich vor:

<link href="filepath/font-face.css" rel="stylesheet">

Zum Beispiel, wenn die Die CSS-Datei „font-face“ befindet sich im Ordner „fonts“ im Ordner „assets“. Der Pfad lautet:

<link href="assets/fonts/font-face.css" rel="stylesheet">

Schriftarten mithilfe des src-Attributs verknüpfen

Innerhalb der CSS-Datei „font-face“ müssen Sie die Schriftartdateien mithilfe des src-Attributs angeben. Die Dateipfade sollten relativ zum Speicherort der Schriftart-CSS-Datei sein. Befinden sich die Schriftartdateien beispielsweise im Ordner „font1“ innerhalb des Ordners „fonts“, lautet das src-Attribut wie folgt:

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

Dieser Ansatz stellt sicher, dass Ihre Stylesheets und Schriftarten unabhängig davon ordnungsgemäß verknüpft sind ihre Position innerhalb der Dateistruktur.

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