Web 開発で異なるフォルダーから外部 CSS ファイルとフォント ファイルをリンクするにはどうすればよいですか?

ファイル ディレクトリ内の外部アセットのリンク

Web 開発における一般的な課題は、スタイルシートやフォントなどの外部リソースの場所が異なる場合にそれらをリンクすることです。メインの HTML ドキュメント。この記事では、これらのアセットが別のフォルダーに存在するシナリオでそれらのアセットをリンクする手法について説明します。

別のフォルダーから CSS ファイルをリンクする

リンクするには別のフォルダーのスタイルシートを使用する場合は、次の構文を使用します:

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

「filepath」をCSS ファイルへの相対パス。たとえば、CSS ファイルが「assets」フォルダー内の「styles」という名前のフォルダーにある場合、パスは次のようになります。

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

Font-Face CSS ファイルのリンク

別のフォルダーからフォントフェイス CSS ファイルをリンクするには、同様の手順に従いますアプローチ:

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

たとえば、フォントフェイス CSS ファイルが「assets」フォルダー内の「fonts」フォルダーにある場合、パスは次のようになります:

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

src 属性を使用したフォントのリンク

font-face CSS 内ファイルを使用するには、src 属性を使用してフォント ファイルを指定する必要があります。ファイル パスは、フォントフェイス CSS ファイルの場所を基準とした相対パスである必要があります。たとえば、フォント ファイルが「fonts」フォルダー内の「font1」フォルダーにある場合、src 属性は次のようになります。

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

このアプローチにより、スタイルシートとフォントが適切にリンクされることが保証されます。ファイル構造内の位置。

以上がWeb 開発で異なるフォルダーから外部 CSS ファイルとフォント ファイルをリンクするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。