Bagaimana untuk menambah beberapa fon bukan standard ke tapak web dalam CSS?-tutorial css-php.cn

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

PHPz

Lepaskan： 2023-08-22 09:37:02

ke hadapan

1190 orang telah melayarinya

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

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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>

Salin selepas log masuk

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');

Salin selepas log masuk

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>

Salin selepas log masuk

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!