Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memautkan Fail CSS dan Fon Luaran daripada Folder Berbeza dalam Pembangunan Web?

Bagaimana untuk Memautkan Fail CSS dan Fon Luaran daripada Folder Berbeza dalam Pembangunan Web?

Susan Sarandon
Susan Sarandonasal
2024-11-30 01:57:13868semak imbas

How to Link External CSS and Font Files from Different Folders in Web Development?

Memautkan Aset Luaran dalam Direktori Fail

Cabaran biasa dalam pembangunan web ialah memautkan sumber luaran seperti helaian gaya dan fon apabila lokasinya berbeza daripada dokumen HTML utama. Dalam artikel ini, kami akan meneroka teknik untuk memautkan aset ini dalam senario di mana ia berada dalam folder berasingan.

Memautkan Fail CSS daripada Folder Berbeza

Untuk memaut helaian gaya daripada folder lain, gunakan sintaks berikut:

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

Ganti "path fail" dengan laluan relatif kepada fail CSS. Contohnya, jika fail CSS terletak dalam folder bernama "styles" dalam folder "assets", laluannya ialah:

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

Memautkan Fail CSS Font-Face

Untuk memautkan fail CSS muka fon daripada folder lain, ikut pendekatan yang serupa:

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

Sebagai contoh, jika fail CSS muka fon terletak dalam folder "fon" dalam folder "aset", laluannya ialah:

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

Memautkan Fon Menggunakan Atribut src

Dalam fail CSS muka fon, anda perlu menentukan fail fon menggunakan atribut src. Laluan fail hendaklah relatif kepada lokasi fail CSS muka fon. Contohnya, jika fail fon berada dalam folder "font1" dalam folder "fonts", atribut src ialah:

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

Pendekatan ini memastikan helaian gaya dan fon anda dipautkan dengan betul, tanpa mengira lokasi mereka dalam struktur fail.

Atas ialah kandungan terperinci Bagaimana untuk Memautkan Fail CSS dan Fon Luaran daripada Folder Berbeza dalam Pembangunan Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn