Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah beberapa fon bukan standard ke tapak web dalam CSS?

Bagaimana untuk menambah beberapa fon bukan standard ke tapak web dalam CSS?

PHPzke hadapan: 2023-08-22 09:37:021161semak imbas

Fon bukan standard merujuk kepada mana-mana fon dalam CSS yang bukan sebahagian daripada set lalai fon yang tersedia dalam kebanyakan penyemak imbas. Fon lalai termasuk Arial, Times New Roman dan Verdana, yang merupakan fon standard kerana ia diprapasang pada kebanyakan komputer dan peranti.

Fon bukan standard ialah fon yang tidak diprapasang dan mesti dimuatkan secara khusus ke dalam tapak web sebelum ia boleh digunakan. Fon ini boleh didapati daripada laman web seperti Google, Adobe atau MyFonts. Mereka juga boleh direka khas atau dibeli.

Menggunakan fon bukan standard boleh membantu menambah sentuhan unik dan peribadi pada reka bentuk tapak web anda. Ia sering digunakan untuk mencipta rupa khusus atau mewujudkan identiti visual jenama.

Tambahkan beberapa fon bukan standard pada tapak web dalam CSS

Tipografi memainkan peranan penting semasa mereka bentuk laman web. Fon lalai yang disediakan dalam CSS, seperti Arial, Times New Roman dan Verdana, semasa tersedia secara berfungsi, selalunya kelihatan hambar dan generik.

Peraturan @font-face membenarkan menentukan fail dan sifat fon supaya fon boleh digunakan pada elemen tertentu pada halaman.

Sintaks

Sintaks untuk menggunakan peraturan @font-face adalah seperti berikut -

@font-face {
   font-family: 'MyFont';
   src: url('path/to/MyFont.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

Dalam contoh ini, kami menentukan keluarga fon sebagai 'MyFont', iaitu nama yang akan digunakan untuk merujuk fon ini sepanjang CSS. Atribut 'src' menentukan lokasi fail fon, dan atribut 'format' menentukan format fail fon. Untuk keserasian penyemak imbas yang lebih baik, adalah disyorkan untuk memasukkan berbilang format fon, seperti truetype, woff, woff2, eot, dsb.

Setelah fon ditakrifkan menggunakan peraturan @font-face, ia boleh digunakan pada elemen tertentu pada halaman menggunakan atribut 'font-family'. Dalam contoh di bawah, kami menggunakan fon tersuai 'MyFont' pada elemen 'body' −

body {
   font-family: 'MyFont', Fallback, sans-serif;
}

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

<html>
<head>
   <style>
      body {
         background-color:pink;
      }
      @font-face {
         font-family: 'MyFont';
         src: url('/css/font/SansationLight.woff')
         format('truetype');
         font-weight: normal;
         font-style: normal;
      }
      p {
         font-family: 'MyFont', Fallback, sans-serif;
      }
      .div {
         font-family: 'MyFont', Arial, sans-serif;
      }
   </Style>
</head>
<body>
   <div class="div">This is the example of font face with CSS3.</div>
   <p><b>Original Text :</b>This is the example of font face with CSS.</p>
</body>
</html>

Kami juga boleh menggunakan @import untuk mengimport fon daripada sumber jauh seperti Google Fonts atau mana-mana perkhidmatan pengehosan fon lain.

@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

<!DOCTYPE html>
<html>
   <title>Google fonts example</title>
   <head>
      <link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet"/>
      <style>
         body {
            font-family: "Permanent Marker";
            font-size: 15px;
         }
      </style>
   </head>
<body>
   <h1>Google fonts example</h1>
   <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiores</p>
</body>
</html>

Kesimpulan

Dengan langkah di atas, kami telah berjaya menambah fon bukan standard ke tapak web. Ingat, adalah penting untuk memastikan bahawa fail fon dihoskan pada pelayan dan boleh diakses oleh penyemak imbas agar fon dapat dipaparkan dengan betul.

Atas ialah kandungan terperinci Bagaimana untuk menambah beberapa fon bukan standard ke tapak web dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk melaksanakan segi tiga dalam cssArtikel seterusnya：Bagaimana untuk melaksanakan segi tiga dalam css

Artikel berkaitan

Lihat lagi