Rumah  >  Artikel  >  hujung hadapan web  >  css menetapkan saiz fon

css menetapkan saiz fon

王林
王林asal
2023-05-29 09:06:075029semak imbas

CSS menetapkan saiz fon

CSS (Cascading Style Sheets) ialah bahasa penanda yang digunakan untuk menerangkan kesan pembentangan dokumen. Dalam reka bentuk web, CSS sering digunakan untuk menentukan sifat teks, warna, latar belakang, sempadan, gaya dan elemen lain. Antaranya, saiz fon adalah salah satu sifat yang paling asas dan biasa digunakan dalam CSS.

CSS boleh menetapkan saiz fon dalam pelbagai cara. Berikut ialah beberapa cara biasa untuk menetapkan saiz fon:

  1. Menggunakan piksel (px)

Pixel (piksel, disingkatkan px) ialah cara paling biasa untuk menetapkan saiz fon unit. Apabila menggunakan piksel sebagai unit, saiz fon berubah apabila tetingkap penyemak imbas dizum. Contohnya, kod berikut menetapkan saiz fon dalam elemen "badan" kepada 16 piksel:

body {
  font-size: 16px;
}
  1. menggunakan em

em ialah unit relatif, saiznya Bergantung pada saiz fon unsur induknya. Sebagai contoh, jika saiz fon elemen ialah 1em dan saiz fon elemen induknya ialah 16px, maka saiz fon elemen ialah 16px. Jika anda menetapkan saiz fon kepada 2em, maka saiz fonnya akan menjadi dua kali ganda saiz fon elemen induk. Kod berikut menetapkan saiz fon dalam elemen "badan" kepada 1.2em:

body {
  font-size: 1.2em;
}
  1. Menggunakan Peratusan

Peratusan ialah unit relatif dan saiznya bergantung pada Fon saiz elemen induknya. Sebagai contoh, jika saiz fon elemen ialah 100% dan saiz fon elemen induknya ialah 16px, maka saiz fon elemen ini juga akan menjadi 16px. Jika anda menetapkan saiz fon kepada 120%, maka saiz fonnya ialah 120% daripada saiz fon elemen induk. Kod berikut menetapkan saiz fon dalam elemen "badan" kepada 120%:

body {
  font-size: 120%;
}
  1. menggunakan rem

rem ialah unit relatif dan saiznya bergantung pada Fon saiz unsur akar. Secara lalai, saiz fon unsur akar ialah 16px. Jika anda menetapkan saiz fon kepada 2rem, maka saiz fonnya ialah 32px (2 kali 16px). Kod berikut menetapkan saiz fon dalam elemen "badan" kepada 1.5rem:

body {
  font-size: 1.5rem;
}

Apabila menetapkan saiz fon menggunakan CSS, anda perlu memberi perhatian kepada perkara berikut:

  1. Apabila menetapkan fon Saiz hendaklah mengikut skala seragam. Sebagai contoh, anda boleh menetapkan saiz fon asas kepada 16px dan melaraskan dari sana.
  2. Saiz fon harus sesuai dengan gaya dan keperluan reka bentuk web. Secara umumnya, saiz fon teks utama hendaklah antara 14px dan 18px, dan saiz fon tajuk hendaklah antara 20px dan 32px.
  3. Untuk reka bentuk web mudah alih, unit relatif (seperti em, rem) harus digunakan untuk menetapkan saiz fon supaya disesuaikan dengan saiz skrin yang berbeza.

Saiz fon tetapan CSS ialah salah satu atribut paling asas dan penting dalam reka bentuk web. Dengan menetapkan saiz fon dengan betul, anda boleh menjadikan halaman web anda lebih mudah dibaca dan boleh digunakan, dengan itu meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci css menetapkan saiz fon. 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