Ubah suai gaya fon css

CSS ialah teknologi yang sangat penting dalam pembangunan bahagian hadapan. CSS ialah bahasa helaian gaya yang menerangkan cara dokumen dipersembahkan Ia mengawal gaya, reka letak, warna, dsb. dokumen HTML untuk memberikan pengguna kesan visual yang lebih baik. Antaranya, pelarasan gaya fon adalah salah satu fungsi yang paling asas dan biasa digunakan dalam CSS. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mengubah suai gaya fon halaman web.

1. Atribut fon

Dalam atribut CSS, atribut gaya fon biasa termasuk keluarga fon, saiz fon, berat fon, gaya fon, dll. Kami akan memperkenalkannya satu demi satu di bawah.

1. keluarga fon

Harta keluarga fon mengawal keluarga fon teks. Keluarga fon boleh menjadi nama satu atau lebih fon, dan penyemak imbas akan memaparkannya mengikut urutan sehingga ia menemui fon yang wujud pada komputer pengguna. Contohnya:

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

Dalam gaya CSS di atas, mula-mula cuba gunakan fon Arial Jika fon tidak tersedia pada komputer pengguna, cuba gunakan fon "Helvetica Neue" atau Helvetica, dan akhirnya gunakan. sans-serif sebagai fon alternatif.

2. saiz fon

Sifat saiz fon mengawal saiz teks. Ia boleh menggunakan unit relatif (seperti em, rem) atau unit mutlak (seperti px, pt). Contohnya:

p {
  font-size: 16px;
}

3. berat fon

Atribut berat fon digunakan untuk menetapkan ketebalan fon. Nilainya adalah normal, tebal, lebih berani, lebih ringan dan pelbagai nilai angka. Contohnya:

h1 {
  font-weight: bold;
}

4. gaya fon

Atribut gaya fon mengawal gaya teks. Nilainya adalah normal, condong, dan serong. Contohnya:

em {
  font-style: italic;
}

2. Pengenalan fon

Jika fon khas perlu digunakan dalam halaman web, kita boleh menggunakan peraturan @font-face untuk menukar fail fon kepada sumber fon . Contohnya:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.ttf');
}

Peraturan di atas bermakna fail fon myfont.ttf diimport dan ditakrifkan sebagai fon MyFont. Anda kemudian boleh menggunakan fon dalam gaya:

h1 {
  font-family: 'MyFont';
}

3. Teknik pengoptimuman fon

Untuk menjadikan paparan fon lebih baik pada peranti yang berbeza, kami boleh menggunakan teknik pengoptimuman berikut:

1. Gunakan keluarga fon yang biasa digunakan di tapak web

Menggunakan keluarga fon biasa akan menjadikan halaman dimuatkan lebih cepat dan mengurangkan kemungkinan penukaran kepada imej. Contohnya:

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

2. Hadkan saiz sumber fon

Sumber fon selalunya besar, kami boleh menggunakan alat pemampatan dalam talian untuk memampatkannya dan mengehadkan saiznya. Contohnya:

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  ... /* 其他属性 */
  font-display: swap; /* 加载非活动选项卡 */
  unicode-range: U+000-5FF; /* 限制字符使用范围 */
}

3. Gunakan fon lalai sistem

Menggunakan fon lalai sistem boleh menjadikan persembahan teks lebih bersatu dan stabil. Contohnya:

body {
  -webkit-font-smoothing: antialiased; /* 平滑字体 */
  -moz-osx-font-smoothing: grayscale;
}

4. Ringkasan

Gaya fon ialah aspek yang sangat penting dalam reka bentuk web Melalui sifat dan teknik CSS yang diperkenalkan di atas, kami boleh mengawal dan mengoptimumkan gaya fon untuk pengguna Provided dengan mudah dengan pengalaman membaca yang lebih baik.

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