fon halaman set css

CSS ialah bahasa yang digunakan untuk menggayakan halaman web, menjadikannya lebih cantik dan mudah dibaca. Antaranya, tetapan fon adalah salah satu bahagian CSS yang paling biasa digunakan dan penting, kerana tetapan fon yang sesuai boleh meningkatkan kebolehbacaan dan kesan visual tapak web. Artikel ini akan meneroka cara menggunakan CSS untuk menetapkan fon halaman.

1. Keluarga fon dan fon

Dalam CSS, keluarga fon merujuk kepada keluarga fon yang digunakan dalam tapak web. Sebagai contoh, kita boleh menetapkan keluarga fon kepada "Arial, sans-serif", yang bermaksud bahawa jika fon Arial tidak dipasang pada komputer pengguna, CSS akan cuba menggunakan fon sans-serif lalai sistem.

Fon (font) merujuk kepada atribut khusus fon, termasuk siri fon, saiz fon, ketebalan fon, gaya fon (seperti italik), dsb. Berikut ialah beberapa sifat fon CSS yang biasa digunakan:

1. keluarga fon: nama fon atau keluarga fon.
2. saiz fon: Saiz fon, anda boleh menggunakan unit px, em, rem atau peratusan saiz relatif.
3. berat fon: Berat fon, yang boleh menjadi normal (lalai), tebal atau nilai angka (100-900).
4. gaya fon: Gaya fon, yang boleh menjadi biasa (lalai), condong atau serong.

2. Cara menetapkan fon halaman

Dalam CSS, terdapat tiga kaedah berikut untuk menetapkan fon:

1. Gunakan @font- penyesuaian muka untuk mengimport Fon:

@font-face {
font-family: custom-font;
src: url('path/to/font.woff2') format( 'woff2') ;
}

body {
font-family: custom-font, sans-serif;
font-size: 16px;
}

Dalam contoh ini, "font tersuai" ialah keluarga fon yang kami takrifkan, yang merujuk kepada fail fon dengan laluan "path/to/font.woff2". Fon ini kemudiannya digunakan pada elemen badan dan fon lalai ditetapkan kepada sans-serif.

2. Gunakan Google Font:

Google Fonts ialah perpustakaan fon dalam talian percuma yang menawarkan beratus-ratus fon untuk dipilih. Untuk menggunakan Google Font, tambahkan kod berikut di bahagian kepala dokumen HTML anda:

Kemudian gunakan fon pada elemen:

body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}

3. Gunakan fon lalai sistem:

Jika anda mahu halaman menggunakan fon lalai sistem, anda boleh menggunakan kod berikut:

body {
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif;
font- saiz: 16px;
}

Fon lalai sistem cenderung mempunyai kebolehbacaan yang baik, jadi ia adalah pilihan yang baik.

3. Laraskan saiz fon dan ketinggian baris

Saiz fon dan ketinggian baris ialah dua faktor yang mempengaruhi kebolehbacaan. Dalam CSS, anda boleh menggunakan kod berikut untuk melaraskan saiz fon dan ketinggian baris:

badan {
saiz fon: 18px;
ketinggian baris: 1.6;
}

Antaranya, ketinggian garis merujuk kepada nisbah ketinggian garisan kepada saiz fon Secara amnya, pilihan yang baik ialah antara 1.4-1.6, yang boleh menjadikan reka letak halaman cantik dan mudah dibaca.

4. Berat dan gaya fon

Berat dan gaya fon juga boleh menjejaskan kebolehbacaan dan kesan visual fon. Dalam CSS, anda boleh menggunakan kod berikut untuk menukar berat, gaya atau kedua-duanya:

body {
font-weight: bold;
}

p {
gaya fon: condong;
}

h1 {
berat fon: tebal;
gaya fon: condong;
}

lima , Kesimpulan

Melalui tetapan fon yang sesuai, kebolehbacaan, kesan visual dan pengalaman pengguna tapak web boleh dipertingkatkan. Dalam aplikasi, anda boleh memilih keluarga fon yang sesuai, saiz fon, ketebalan, gaya dan ketinggian garisan mengikut tema dan khalayak sasaran tapak web, yang boleh menjadikan laman web lebih cantik dan mudah dibaca, dan memberikan pengguna yang lebih baik. pengalaman membaca.

Atas ialah kandungan terperinci fon halaman set css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!