Bagaimana untuk menetapkan saiz teks dalam css

Dalam reka bentuk web, saiz teks adalah salah satu elemen yang sangat penting. Anda boleh meningkatkan kebolehbacaan halaman web anda dengan melaraskan saiz teks, menjadikan kandungan lebih mudah dibaca. Dalam HTML, saiz teks boleh ditetapkan menggunakan CSS (Cascading Style Sheets). Berikut ialah beberapa tetapan saiz teks CSS biasa.

1. Gunakan unit mutlak

Unit mutlak dalam CSS termasuk piksel (px), titik (pt), inci (in), sentimeter (cm), dll. Anda boleh menggunakan unit ini untuk menentukan nilai piksel tertentu atau dimensi sebenar apabila menetapkan saiz teks.

Sebagai contoh, anda boleh menggunakan kod berikut untuk menetapkan saiz teks perenggan kepada 16 piksel:

p {
saiz fon: 16px;
}

Dengan cara ini, semua perenggan akan dipaparkan pada 16 piksel.

Jika anda ingin menetapkan saiz teks kepada saiz sebenar, anda boleh menggunakan inci, sentimeter, dsb. Sebagai contoh, kod berikut menetapkan saiz teks perenggan kepada 2 inci:

p {
saiz fon: 2in;
}

Perhatikan di sini bahawa tetapan unit saiz sebenar digunakan Saiz teks dipengaruhi oleh resolusi skrin dan saiz peranti. Oleh itu, saiz teks mungkin berbeza pada peranti yang berbeza.

2. Gunakan unit relatif

Selain unit mutlak, CSS juga menyokong unit relatif. Saiz unit relatif adalah relatif kepada saiz elemen induk. Unit relatif biasa termasuk em, rem, %, dsb.

1. em

em ialah unit relatif untuk menetapkan saiz teks berbanding saiz fon elemen semasa. Sebagai contoh, kod berikut menetapkan saiz fon perenggan kepada 1.5 kali saiz fon elemen induk:

p {

font-size: 1.5em;

}

Jika saiz fon daripada elemen induk ialah 16 piksel, saiz fon perenggan ialah 24 piksel (16*1.5).

2. rem

rem ialah unit relatif untuk menetapkan saiz teks berbanding saiz fon unsur akar (iaitu elemen html). Contohnya:

html {
saiz fon: 16px;
}

Berdasarkan ini, kod berikut menetapkan saiz fon perenggan kepada 1.5 kali saiz fon elemen akar :

p {
saiz fon: 1.5rem;
}

Jika saiz fon unsur akar ialah 16 piksel, saiz fon bagi perenggan ialah 24 piksel (16 *1.5).

Berbanding dengan em, rem lebih mudah kerana ia tidak dipengaruhi oleh saiz fon elemen induk, tetapi dikira secara relatif kepada elemen akar keseluruhan halaman.

3. %

% juga merupakan unit relatif untuk menetapkan saiz teks berbanding saiz elemen induk. Sebagai contoh, kod berikut menetapkan saiz fon perenggan kepada 150% daripada saiz fon elemen induk:

p {
saiz fon: 150%;
}

jika elemen induk Saiz fon ialah 16 piksel, maka saiz fon perenggan ialah 24 piksel (16*1.5).

3. Gunakan kata kunci

Selain unit saiz tertentu, CSS juga menyokong beberapa kata kunci untuk menetapkan saiz teks. Kata kunci yang biasa digunakan termasuk kecil, sederhana dan besar.

Sebagai contoh, kod berikut menetapkan saiz teks perenggan kepada sederhana:

p {
saiz fon: sederhana;
}

Dengan cara ini , saiz Teks perenggan akan diubah saiz mengikut tetapan lalai penyemak imbas.

4. Ringkasan

Dalam reka bentuk web, saiz teks merupakan salah satu elemen yang sangat penting. CSS boleh digunakan untuk menetapkan teks dalam saiz yang berbeza mengikut keperluan reka bentuk. Anda boleh menetapkannya menggunakan piksel, saiz sebenar, em, rem, %, kata kunci, dsb., dan pilih mengikut situasi tertentu.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan saiz teks dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!