Bagaimana Menggunakan CSS untuk Memaparkan Fon Tersuai pada Laman Web HTML?-tutorial css-php.cn

Bagaimana Menggunakan CSS untuk Memaparkan Fon Tersuai pada Laman Web HTML?

Patricia Arquette

Lepaskan： 2024-12-14 04:57:10

asal

177 orang telah melayarinya

How to Use CSS to Display a Custom Font on an HTML Website?

Cara Memaparkan Fon Tersuai dalam Tapak Web HTML

Melaksanakan fon tersuai pada tapak HTML tanpa menggunakan Flash atau PHP boleh dicapai menggunakan CSS.

Penyelesaian: Gunakan CSS @font-face Peraturan

Peraturan @font-face dalam CSS membenarkan pengisytiharan fon tersuai. Sintaksnya adalah seperti berikut:

@font-face {
  font-family: [Font Name]; /* Define the custom font name */
  src: url([Font File Path]); /* Specify the path to the font file */
}

Salin selepas log masuk

Sebagai contoh, untuk memuatkan fon "KG June Bug":

@font-face {
  font-family: "JuneBug";
  src: url("JUNEBUG.TTF");
}

Salin selepas log masuk

Setelah fon diisytiharkan, ia boleh digunakan dalam elemen HTML seperti fon standard:

<h1>
  <p>

Salin selepas log masuk

Dalam kes ini, teks dalam

elemen akan dipaparkan menggunakan fon tersuai "JuneBug". Pastikan fail JUNEBUG.TTF diletakkan dalam direktori yang sama dengan fail HTML.

Contoh Kod:

<html>
  <head>
    <style>
      @font-face {
        font-family: "JuneBug";
        src: url("JUNEBUG.TTF");
      }

      h1 {
        font-family: "JuneBug";
      }
    </style>
  </head>
  <body>
    <h1>Custom Font Display</h1>
  </body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana Menggunakan CSS untuk Memaparkan Fon Tersuai pada Laman Web HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!