Bagaimana Menggunakan Fon Terbaik dalam CSS?

Artikel ini akan memperkenalkan anda kepada topik yang mudah tetapi penting iaitu Font In dan juga akan memberi anda demonstrasi praktikal mengenai perkara ini. Petunjuk berikut akan dibahas dalam artikel ini,

• Fon dalam CSS
• Atribut dalam Font CSS
• atribut gaya fon
• atribut berat-font
• atribut saiz fon
• atribut font-keluarga

Laman web membawa kandungan dalam bentuk gambar, audio, video dan kandungan teks. Walau bagaimanapun, kebanyakan laman web masih bergantung pada teks sebagai format utama. Ini kerana teks biasa menawarkan beberapa kelebihan yang sangat ketara.

Kebolehbacaan tidak mengganggu - Anda ingin memeriksa skor perlawanan terkini semasa di pejabat. Tentunya anda mahukan kemas kini teks pantas, bukan video yang bising!
Keperluan lebar jalur rangkaian rendah - Kandungan teks dapat dimuat walaupun di kawasan penyambungan internet yang lemah, sementara media kaya tidak dapat.
Mesra carian - Laman web selalu mengawasi seberapa mudah kandungannya diperhatikan di mesin pencari. Teks sangat sesuai untuk ini, sekurang-kurangnya sehingga AI mengambil alih internet sepenuhnya!

Semasa memformat kandungan teks, pereka web hanya memiliki beberapa parameter untuk dikerjakan - font, penjajaran, penyorotan dan warna. Memilih fon yang tepat untuk teks anda adalah pilihan yang penting. Amalan standard adalah menggunakan tag font CSS untuk menentukan fon untuk teks dalam halaman HTML.
Sekiranya anda baru dalam dunia pengaturcaraan HTML, mulakan lawatan asas di sini. Anda mungkin ingin membaca asas-asas CSS sebelum belajar mengenai fon CSS.

pengendalian fail dalam contoh java

Untuk tutorial CSS yang komprehensif, lawati Edureka CSS Tutorial For Beginners. Anda akan mendapat kemajuan yang baik mengenai cara CSS digunakan untuk menambah reka bentuk web HTML.

Teruskan dengan artikel ini mengenai Font di CSS

Fon dalam CSS

Fon pada dasarnya adalah sekumpulan ciri yang berkaitan dengan paparan teks. Fon dibezakan antara satu sama lain mengikut ukuran, lekukan, lebar, condong dan sebagainya. Mari kita mulakan dengan paparan teks asas dalam fon yang berbeza.

Contoh 1: Tajuk dan perenggan dalam pelbagai fon

badan {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
Perenggan dalam huruf Georgia tebal miring
 

 Contoh 1: Keluaran 

Dalam Contoh 1, kita mempunyai 3 baris teks yang berbeza dalam fon yang berbeza. Anda akan melihat bahawa setiap fon berbeza dengan lebar karakter, lekukan, dll.

Teruskan dengan artikel ini mengenai Font di CSS

Atribut dalam Font CSS

Font CSS mempunyai 4 atribut utama - gaya, berat, ukuran dan keluarga. Atribut gaya menunjukkan normal atau miring. Berat menunjukkan fon sebagai biasa atau tebal. Berat juga boleh dinyatakan secara berangka. Ukurannya hanya saiz fon yang lebih besar dari ukurannya, semakin besar penampilan teksnya. Terdapat beberapa cara di mana saiz fon dapat diberikan, penerangan terperinci diberikan di bahagian kemudian. Atribut keluarga adalah untuk menetapkan nama fon pada teks.

Dalam Contoh 1, kami telah menggunakan nama font yang berlainan untuk tajuk dan perenggan. Di bawah tag h1 dan p, kami melihat dua nama fon disenaraikan, sementara tag h2 hanya menamakan satu fon. Inilah definisi keluarga fon, lebih lanjut mengenai ini kemudian.

Teruskan dengan artikel ini mengenai Font di CSS

atribut gaya fon:

Dua gaya utama yang dapat ditetapkan adalah ‘normal’ dan ‘miring’. Huruf miring seharusnya bersifat kursif dengan condong. Normal adalah pilihan lalai yang lurus. Terdapat satu lagi pilihan yang kurang digunakan yang disebut 'serong', yang menyerupai pilihan miring di kebanyakan fon. Anda juga boleh menetapkan gaya untuk 'mewarisi' sehingga mengambil gaya fon dari elemen induknya.

Teruskan dengan artikel ini mengenai Font di CSS

atribut berat-font:

Atribut ini menentukan sama ada fon itu kelihatan tebal atau nipis. Ia boleh diatur ke 'normal' atau 'tebal'. Nilai lalai adalah normal. Nilai ini juga dapat ditetapkan sebagai angka. Berat 400 mewakili normal dan 700 adalah tebal. Terdapat beberapa tetapan lain (mulai dari 100 - sangat ringan hingga 900 - sangat berani), tetapi tidak disokong oleh semua fon. Semua pilihan berat ditunjukkan dalam Contoh 3.

Teruskan dengan artikel ini mengenai Font di CSS

atribut saiz fon:

Atribut ukuran boleh ditetapkan dalam pelbagai cara. Mari kita senaraikan cara-cara di bawah ini.
● Nilai yang dihitung seperti ‘medium’, ‘large’. Sebenarnya seperti saiz pakaian, nilainya boleh berkisar antara XX Kecil hingga XX Besar!
● Tetapkan relatif kepada elemen induknya, sebagai 'lebih besar' atau 'lebih kecil'.
● Peratusan ukuran elemen induk.
● Tetapkan sebagai 'mewarisi' untuk menerapkan ukuran elemen induk secara langsung.
● Sebagai nilai mutlak dalam unit px (piksel), pt (titik) atau cm (sentimeter)
‘Medium’ adalah nilai lalai yang ditetapkan untuk parameter ini.

Teruskan dengan artikel ini mengenai Font di CSS

atribut font-keluarga:

Dalam HTML, keluarga font CSS adalah untuk menetapkan nama font. Anda hanya boleh meletakkan satu nama fon dengan teg. Atau anda boleh menetapkan beberapa nilai sebagai senarai keluarga-font yang menentukan keutamaan di mana penyemak imbas harus memilih fon.
Senarai diutamakan dari kiri ke kanan, dalam bentuk sistem fall-back. Nilai pertama jika tersedia dipilih, atau kawalan pergi ke yang berikutnya, sehingga akhir senarai tercapai. Keluarga fon lalai ditentukan oleh pilihan penyemak imbas.
Keluarga fon CSS terdiri daripada 2 jenis - keluarga fon dan keluarga fon.
● Keluarga generik - berdasarkan beberapa ciri umum, fon dikelompokkan sebagai 'serif', 'sans serif', 'monospace', dll. Sebagai contoh, Sans serif bermaksud fon tanpa gaya serif.
● Nama keluarga - fon yang termasuk dalam hierarki keluarga tertentu. Times, Arial, Courier adalah semua keluarga fon dan Times New Roman adalah fon contoh keluarga Times.
Pelbagai pilihan penggunaan keluarga fon disenaraikan dalam Contoh 4 di bawah.

Beberapa perkara biasa yang perlu diberi perhatian

● Seperti beberapa sifat CSS lain, beberapa tetapan fon berbeza di penyemak imbas yang berbeza. Periksa sokongan penyemak imbas sebelum menggunakan beberapa tetapan fon yang jarang berlaku.
● Anda boleh menetapkan tetapan fon secara berasingan menggunakan tag gaya-fon, berat font, dan lain-lain. Sebagai alternatif, jika anda lebih suka kod padat, anda boleh menggunakan atribut font pendek dengan semua nilai dalam baris yang sama.
● Dalam senario pengguna di mana anda mahu font bervariasi dalam ukuran bergantung pada ukuran penyemak imbas, ada pengaturan ukuran font berguna yang disebut pengaturan fon responsif. Ini dapat diatur dengan unit vw, yang berarti 'lebar pandang'. Dengan cara itu ukuran teks akan mengikut ukuran tetingkap penyemak imbas.

Semoga anda mendapat maklumat yang anda cari di Fonts CSS. Kongsi pengalaman anda dengan kami di bahagian komen di bawah. Selamat merancang!

Sekiranya anda berminat untuk mempelajari lebih lanjut mengenai pengembangan web, lihat oleh Edureka. Latihan Pensijilan Pembangunan Web akan membantu anda Mempelajari cara membuat laman web yang mengagumkan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery dan Google API dan menyebarkannya ke Amazon Simple Storage Service (S3).