首頁 > web前端 > css教學 > 如何在 HTML 中連結不同資料夾中的 CSS 和字體檔案?

如何在 HTML 中連結不同資料夾中的 CSS 和字體檔案?

Patricia Arquette
發布: 2024-11-28 12:26:14
原創
338 人瀏覽過

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

跨資料夾連結CSS 和字體檔案

在給定的資料夾結構中,任務是連結來自單獨的CSS 檔案和字型檔案資料夾到HTML 檔案。為此:

連結CSS 檔案:

開啟HTML 檔案並在

中加入以下行:部分:
<link href="../stylesheet.css" rel="stylesheet">
登入後複製

此行指定stylesheet.css 檔案位於HTML 檔案上方(向後)的一個資料夾。

連結Font-Face CSS 文件:

類似地,要連結font-face CSS 文件,請將以下行加入部分:

<link href="fonts/fontstyle.css" rel="stylesheet">
登入後複製

此行指向字體CSS 文件,該文件位於「fonts」資料夾中。

連結字體

要連結fontstyle.css 檔案中的字體,請使用src 屬性作為如下:

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

此程式碼指定Font1字體位於“fonts/font1”資料夾中,並包含TTF 和SVG 版本。

使用相對時請記住以下準則檔案路徑:

  • 以「/」開頭返回根目錄目錄。
  • 以「../」開頭向後移動目錄。
  • 以「../」開頭向後移動兩個目錄。
  • 要向前移動,請從第一個子目錄並繼續前進。

以上是如何在 HTML 中連結不同資料夾中的 CSS 和字體檔案?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板