Bagaimana untuk menetapkan fon dalam fon css

CSS ialah bahasa helaian gaya yang digunakan untuk reka bentuk web. Ia membolehkan pembangun mengawal gaya dan reka letak halaman web dengan lebih mudah, termasuk tetapan fon. Dalam artikel ini, kami akan meneroka cara menetapkan fon CSS untuk membantu anda mencipta reka bentuk web yang cantik, boleh dibaca dan pelbagai.

1. Pengetahuan asas tentang tetapan fon

Dalam CSS, fon biasanya ditakrifkan oleh empat nilai atribut: keluarga fon, berat fon, condong dan saiz fon. Ia sepadan dengan empat sifat CSS iaitu font-family, font-weight, font-style dan font-size masing-masing.

1. Keluarga fon (font-keluarga)

Keluarga fon merujuk kepada koleksi fon, juga dipanggil keluarga fon. Teks dalam halaman web boleh menggunakan mana-mana fon yang dipasang pada tapak web, atau menggunakan fon yang dipasang pada komputer pengguna.

Dalam CSS, anda boleh menggayakan teks pada halaman web dengan menentukan satu atau lebih keluarga fon. Contohnya:

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

Gaya di atas menunjukkan bahawa keluarga fon kandungan teks ditetapkan kepada Arial, iaitu fon sans serif Barat universal. Jika fon Arial tidak dipasang pada komputer pengguna, sistem sebaliknya akan mencari fon sans-serif, iaitu keluarga fon sans-serif umum seperti Helvetica atau Verdana.

2. Berat fon

Berat fon mentakrifkan ketebalan fon. Dalam CSS, berat fon boleh ditentukan sebagai "normal" (lalai), "bold" (bold), atau menggunakan nilai berangka untuk menentukan ketebalan. Contohnya:

h1 {
  font-weight: 700;
}

Gaya di atas menetapkan berat fon tajuk h1 kepada "700", yang bermaksud ia akan menjadi lebih tebal.

3. Italik (gaya fon)

Italik mentakrifkan sama ada fon itu senget atau tidak. Dalam CSS, italik boleh ditetapkan dengan "biasa" (lalai), "italic" (italik) atau "serong" (italik). Contohnya:

em {
  font-style: italic;
}

Gaya di atas akan memaparkan teg em dalam teks dengan gaya condong.

4. Saiz fon

Saiz fon merujuk kepada saiz teks. Dalam CSS, saiz fon boleh ditentukan menggunakan unit seperti piksel (px), peratusan (%), em atau rem (berdasarkan saiz relatif unsur akar). Contohnya:

p {
  font-size: 16px;
}

Gaya di atas menetapkan saiz fon teks kepada 16 piksel (px).

2. Lagi tetapan fon

Selain keluarga fon, berat fon, condong dan saiz fon, CSS juga menyediakan beberapa tetapan fon lain untuk kawalan yang lebih terperinci.

1. Gaya fon (gaya fon)

CSS menyediakan atribut gaya fon, yang masing-masing boleh menentukan sama ada fon itu condong, biasa dan condong . Contohnya:

font-style: italic normal oblique;

2. Varian fon (varian fon)

Atribut varian fon digunakan untuk mengawal varian fon, seperti "huruf besar kecil " dan "biasa" dsb. Contohnya:

font-variant: small-caps;

3. Teks-transformasi)

Atribut text-transform digunakan untuk mengawal gaya transformasi teks, seperti "huruf besar" dan "huruf kecil" "(huruf kecil) dsb. Contohnya:

text-transform: uppercase;

4. tinggi garis Sifat

tinggi garis digunakan untuk mengawal ketinggian baris teks. Contohnya:

line-height: 1.5;

5. jarak huruf

Atribut jarak huruf boleh menambah atau mengurangkan jarak antara huruf. Contohnya:

letter-spacing: 2px;

3. Fon tersuai

Dalam CSS, anda bukan sahaja boleh menggunakan fon yang telah dipasang pada komputer anda, tetapi anda juga boleh menambah personaliti yang lebih hebat pada halaman web dengan menggunakan fon tersuai dan kepelbagaian. Mari perkenalkan cara menggunakan fon tersuai.

1. Menggunakan @font-face

Peraturan @font-face membenarkan anda menggunakan fon tersuai. Anda boleh memuatkan fail fon ke dalam CSS untuk digunakan dalam halaman web.

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

Kod CSS di atas memuatkan fon MyFont dengan laluan "/fonts/myfont.ttf". Pengguna perlu memuat turun fail fon sebelum teks pada halaman web boleh dipaparkan dengan betul.

2. Nyatakan keluarga fon

Apabila anda mencipta peraturan @font-face, anda perlu menyatakan nama keluarga fon. Anda boleh menggunakan nama ini untuk menggayakan teks pada halaman web anda. Contohnya:

h1 {
  font-family: "MyFont", sans-serif;
}

Gaya di atas menetapkan fon teks kepada MyFont, menggunakan keluarga fon sans-serif jika pengguna tidak memasang MyFont.

4. Ringkasan

Fon CSS ialah aspek penting dalam reka bentuk web. Ia boleh membantu pembangun web mengawal penampilan dan persembahan halaman web. Dengan menggunakan sifat seperti keluarga fon, berat fon, italik dan saiz fon, serta fon tersuai dan sifat CSS lain, anda boleh mencipta reka bentuk web yang berwarna-warni dan memberikan pengguna pengalaman membaca yang lebih baik.

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