Rumah >hujung hadapan web >tutorial css >Bagaimana Mengimport Fon dengan Betul dalam CSS menggunakan Peraturan @font-face?

Bagaimana Mengimport Fon dengan Betul dalam CSS menggunakan Peraturan @font-face?

Patricia Arquette
Patricia Arquetteasal
2024-11-03 10:55:03197semak imbas

How to Properly Import Fonts in CSS using the @font-face Rule?

Mengimport Fon dalam CSS: Penyelesaian Komprehensif

Dalam pembangunan web, selalunya perlu menggunakan fon yang mungkin tidak dipasang pada klien komputer. Untuk mencapai matlamat ini, CSS menyediakan peraturan @font-face. Walau bagaimanapun, sesetengah pengguna mungkin menghadapi masalah dengan coretan kod yang disediakan:

<code class="css">@font-face {
    font-family: EntezareZohoor2;
    src: url(Entezar2.ttf) format("truetype");
}

.EntezarFont {
    font-family: EntezareZohoor2, B Nazanin, Tahoma !important;
}</code>

Untuk menangani isu ini, berikut ialah coretan kod diubah suai yang mentakrifkan fon menggunakan CSS dengan betul:

<code class="css">@font-face {
    font-family: 'EntezareZohoor2';
    src: url('fonts/EntezareZohoor2.eot'), url('fonts/EntezareZohoor2.ttf') format('truetype'), url('fonts/EntezareZohoor2.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

#newfont {
    font-family: 'EntezareZohoor2';
}</code>

Dalam coretan ini, peraturan @font-face ditakrifkan dengan betul dengan spesifikasi berikut:

  • font-family: Nama fon yang akan digunakan dalam CSS, dalam kes ini 'EntezareZohoor2'.
  • src: Sumber fail fon, termasuk berbilang format untuk pelbagai penyemak imbas.
  • berat fon dan gaya fon: Sifat pilihan yang menentukan berat dan gaya fon.

Selain itu, elemen fon baru ditakrifkan untuk menggunakan fon 'EntezareZohoor2' dengan menetapkan sifat keluarga fonnya. Dengan mengikut garis panduan ini, pengguna boleh mengimport fon dalam CSS dengan berkesan dan memastikan paparan yang betul pada komputer pelanggan.

Atas ialah kandungan terperinci Bagaimana Mengimport Fon dengan Betul dalam CSS menggunakan Peraturan @font-face?. 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