Bagaimana untuk mengubah suai gaya fon melalui HTML dan CSS

Dalam reka bentuk web, fon adalah salah satu faktor yang sangat penting. Pemilihan fon yang baik boleh meningkatkan kebolehbacaan dan kesan visual halaman web. HTML menyediakan banyak pilihan fon, dan gaya fon juga boleh diubah suai melalui CSS. Dalam artikel ini, kami akan meneroka cara mengubah suai gaya fon melalui HTML dan CSS.

1. Pemilihan fon dalam HTML

Dalam HTML, terdapat banyak fon untuk dipilih. Berikut ialah beberapa contoh fon biasa:

<p style="font-family: Arial, sans-serif;">这里是Arial字体。</p>
<p style="font-family: "Times New Roman", serif;">这里是Times New Roman字体。</p>
<p style="font-family: Verdana, Geneva, sans-serif;">这里是Verdana字体。</p>
<p style="font-family: Impact, Charcoal, sans-serif;">这里是Impact字体。</p>

Dalam contoh di atas, kami menggunakan atribut keluarga fon untuk menentukan fon. Di sini, kami telah menentukan empat fon: Arial, Times New Roman, Verdana dan Impact, yang sepadan dengan gaya yang berbeza. Perlu diingat bahawa jika anda mentakrifkan gaya yang sama dalam fail CSS, gaya ini akan mengatasi gaya yang ditetapkan dalam teg HTML.

2. Mentakrifkan gaya fon dalam CSS

Dalam CSS, kita boleh mentakrifkan gaya fon melalui atribut keluarga fon. Contohnya:

body {
  font-family: Arial, sans-serif;
}

Di sini, kami mentakrifkan fon lalai untuk keseluruhan halaman menjadi Arial Jika fon Arial tidak boleh dimuatkan, fon sans-serif akan digunakan.

Selain atribut keluarga fon, anda juga boleh mengubah suai gaya fon melalui atribut lain. Berikut ialah beberapa atribut biasa:

• saiz fon: Tentukan saiz fon, seperti 12px, 14px, dsb.
• gaya fon: Tentukan gaya fon, termasuk biasa, condong, condong, dsb.
• berat fon: Tentukan ketebalan fon, seperti biasa, tebal, lebih tebal, dsb.
• tinggi garisan: Tentukan ketinggian garisan, yang boleh menjadi nombor atau peratusan.

Sifat ini boleh digabungkan untuk mencipta kesan fon yang berbeza. Contohnya:

h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
}

Di sini, kami mentakrifkan fon tajuk h1 sebagai Arial, saiz fon sebagai 24px, ketebalan fon sebagai tebal dan ketinggian garisan sebagai 1.5 kali.

3. Menggunakan Fon Web

Selain menggunakan fon terbina dalam sistem, kami juga boleh menggunakan fon Web. Fon web ialah format fon yang boleh digunakan secara langsung pada penyemak imbas Format biasa termasuk WOFF, WOFF2, TTF dan OTF, dsb. Menggunakan fon web boleh menambah kepelbagaian dan keunikan pada fon anda.

Untuk menggunakan fon web, kami boleh mengisytiharkan peraturan @font-face dalam CSS. Contohnya:

@font-face {
  font-family: MyWebFont;
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff');
}

body {
  font-family: MyWebFont, Arial, sans-serif;
}

Di sini, kami mula-mula mengisytiharkan fon bernama "MyWebFont", dan kemudian nyatakan alamat fail fon melalui atribut src. Apabila menggunakan sifat fon-family, kita boleh menggunakan berbilang fon dengan memisahkannya dengan koma. Dalam contoh ini, jika penyemak imbas tidak dapat memuatkan fon web, fon Arial dalam sistem akan digunakan sebaliknya.

4. Isu hak cipta fon

Apabila menggunakan fon tersuai, kita perlu memberi perhatian kepada isu hak cipta fon. Jika hak cipta fon tidak membenarkan penggunaan di web, maka kami tidak boleh menggunakan fon dalam halaman web.

Terdapat banyak fon percuma yang tersedia untuk kami gunakan sekarang, seperti Google Font dan DaFont, dsb. Melalui laman web ini, kami boleh mencari fon yang sesuai dengan cepat dan memanggilnya dalam CSS.

5. Ringkasan

Fon memainkan peranan penting dalam reka bentuk web. Melalui HTML dan CSS, kami boleh melaraskan gaya dan penampilan fon dengan mudah. Apabila memilih fon, terdapat isu kebolehbacaan dan hak cipta untuk dipertimbangkan. Menggunakan fon web boleh meningkatkan kepelbagaian, tetapi anda perlu memberi perhatian kepada isu hak cipta fon.

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai gaya fon melalui HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!