Bagaimana Saya Menetapkan Fon-Families dengan betul untuk Ikon Hebat Font dalam CSS?

Menentukan Fon-Family yang Betul dalam Font Awesome Pseudo-Elements

Font Awesome 5 menawarkan pengguna pelbagai keluarga ikon, termasuk Percuma, Pepejal, Jenama dan Biasa. Setiap keluarga memerlukan tugasan keluarga fon tertentu dalam elemen pseudo CSS untuk memaparkan ikon dengan betul.

Kes 1: Ikon Jenama

Apabila menggunakan ikon jenama, seperti ikon Twitter yang tersedia di https://fontawesome.com/icons/twitter?style=brands, jenis font yang betul ialah "Font Awesome 5 Jenama." Ini kerana ikon jenama mempunyai gaya visual yang berbeza dan ditempatkan dalam keluarga fon yang berasingan.

Kes 2: Ikon Pepejal

Apabila cuba memaparkan ikon pepejal, seperti ikon telefon yang tersedia di https://fontawesome.com/icons/phone?style=solid, adalah penting untuk ambil perhatian bahawa keluarga fon yang betul bukan "Font Awesome 5 Solid." Ikon pepejal sebenarnya tergolong dalam keluarga fon yang sama seperti ikon biasa, iaitu "Font Awesome 5 Free."

Pendekatan yang Betul

Daripada memberikan fon tertentu- keluarga untuk setiap gaya ikon, adalah disyorkan untuk memasukkan semua keluarga fon yang diperlukan dalam satu baris, dipisahkan dengan koma. Ini memastikan penyemak imbas akan menggunakan fon yang sesuai berdasarkan gaya ikon:

.icon {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Brands", "Font Awesome 5 Free";
}

Dengan pendekatan ini, penyemak imbas akan mengutamakan keluarga fon Jenama apabila menemui ikon jenama dan keluarga fon Percuma apabila menghadapi ikon pepejal atau biasa.

Atas ialah kandungan terperinci Bagaimana Saya Menetapkan Fon-Families dengan betul untuk Ikon Hebat Font dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!