Malay

Tutorial CSS

Tutorial CSS3

CSS Lanjutan

Rujukan CSS

CSS Responsif

CSS - Web Fonts: A Beginner's Guide

Hai there, bakal设计师 web! Saya begitu gembira untuk menjadi pandu anda dalam perjalanan yang menarik ke dunia CSS Web Fonts. Sebagai seseorang yang telah mengajar sains komputer untuk tahun, saya dapat katakan kepada anda bahawa memahami font adalah seperti belajar bahasa baru - ia mungkin kelihatan menakutkan pada awalnya, tetapi sekali anda menguasaiinya, anda akan terkejut melihat bagaimana ia merubah halaman web anda!

CSS - Web safe fonts

Apa Itu Web Fonts?

Sebelum kita masuk ke dalam hal yang teknis, mari kita mulai dengan dasar. Web fonts adalah font khusus yang anda boleh gunakan di laman web anda, tanpa menghiraukan sama ada ia dipasang di komputer pengguna. Ia seperti memberikan laman web anda suara yang unik!

Mengapa Web Fonts Penting?

Imaginalkan jika setiap buku di dunia menggunakan font yang sama. Bosan, kan? Web fonts membolehkan anda untuk meluahkan personaliti laman web anda dan meningkatkan ketersedian. Ia adalah seperti rempah rahsia yang boleh membuat laman anda berbeza daripada kumpulan lain!

CSS Web Fonts - Jenis Format Font

Sekarang, mari kita bicarakan tentang jenis-jenis format font. Ia seperti memilih antara rasa es krim yang berbeza - setiapnya mempunyai ciri-ciri tersendiri!

Format Keterangan Sokongan Pelayar
TTF/OTF TrueType Font / OpenType Font Semua pelayar modern
WOFF Web Open Font Format Semua pelayar modern
WOFF2 Web Open Font Format 2 Kebanyakan pelayar modern
EOT Embedded OpenType Internet Explorer
SVG Scalable Vector Graphics Versi iOS yang lebih tua

Jangan bimbang jika ini kelihatan seperti sup Tulang Abjad sekarang. Kita akan membahagikan ini sepanjang perjalanan!

CSS Web Fonts - Titik Kunci

Sebelum kita mulai memasukkan kod, mari kitaulas beberapa titik kunci:

  1. Web fonts membolehkan anda gunakan font khusus di laman web anda.
  2. Ia dimuat dari pelayan, bukan komputer pengguna.
  3. Anda boleh menggunakan perkhidmatan seperti Google Fonts atau menyediakan font sendiri.
  4. Ada jenis-jenis format font untuk keserasian pelayar.
  5. Peraturan @font-face digunakan untuk menentukan font khusus dalam CSS.

CSS Web Fonts - At-Rule @font-face

Sekarang, mari kita masuk ke dalam sedikit kod! Peraturan @font-face adalah seperti memperkenalkan font baru ke halaman web anda. Ini adalah bagaimana ia kelihatan:

@font-face {
font-family: 'MyAwesomeFont';
src: url('path/to/my-awesome-font.woff2') format('woff2'),
url('path/to/my-awesome-font.woff') format('woff');
font-weight: normal;
font-style: normal;
}

Mari kita pecahkan ini:

  • font-family: Ini adalah nama yang anda berikan kepada font. Anda akan menggunakan nama ini kemudian untuk meng applies font ke elemen.
  • src: Ini menentukan di mana mencari fail font dan formatnya.
  • font-weight dan font-style: Ini menentukan ciri-ciri font.

Selepas menentukan font anda, anda boleh menggunakannya seperti ini:

body {
font-family: 'MyAwesomeFont', sans-serif;
}

Ini memberitahu pelayar, "Hey, gunakan MyAwesomeFont, tetapi jika anda tidak menjumpainya, gunakan font sans-serif mana-mana."

CSS Web Fonts - @font-face / font-stretch

Properti font-stretch adalah seperti kelas yoga untuk font anda. Ia membolehkan anda menyelesaikan atau mengurangkan font. Ini adalah bagaimana anda boleh menggunakannya:

@font-face {
font-family: 'StretchyFont';
src: url('path/to/stretchy-font.woff2') format('woff2');
font-stretch: ultra-expanded;
}

.stretched-text {
font-family: 'StretchyFont';
font-stretch: 150%;
}

Ini akan membuat teks anda kelihatan seperti ia telah ke gym dan membungkuk!

CSS Web Fonts - Perkhidmatan Font Online

Menggunakan perkhidmatan font online adalah seperti memesan makanan takeout daripada memasak - ia mudah dan ada banyak pilihan untuk dipilih. Google Fonts adalah pilihan yang popular. Ini adalah bagaimana anda boleh menggunakannya:

  1. Pergi ke Google Fonts dan pilih font yang anda suka.
  2. Salin tag link yang disediakan dan tampalnya di <head> HTML anda:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  1. Gunakan font dalam CSS anda:
body {
font-family: 'Roboto', sans-serif;
}

Dan voila! Anda kini menggunakan font khusus daripada Google Fonts.

CSS Web Fonts - Import Font

Cara lain untuk memasukkan web fonts adalah dengan menggunakan peraturan @import. Ia seperti menjemput font ke pesta CSS anda. Ini adalah bagaimana ia berkerja:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
font-family: 'Roboto', sans-serif;
}

Metod ini membolehkan anda mengekalkan semua deklarasi font anda dalam fail CSS anda, yang disukai oleh beberapa pengembang untuk organisasi.

Konklusi

Tahniah! Anda telah mengambil langkah pertama ke dalam dunia yang menarik CSS Web Fonts. Ingat, seperti belajar kemahiran baru, latihan membuat sempurna. Jangan takut untuk menguji font yang berbeza dan lihat bagaimana mereka mengubah penampilan dan rasa halaman web anda.

Sementara kita membuktikan, ini adalah cerita kecil dari pengalaman pengajaran saya: Saya pernah ada murid yang kesulitan dengan reka bentuk web. Dia tidak dapat tahu mengapa laman webnya kelihatan begitu... biasa. Kemudian kita mencakup web fonts, dan ia seperti lampu penerangan yang menyala. Tiba-tiba, laman webnya berubah daripada membosankan ke indah. Itu kekuatan web fonts!

Jadi, teruskan, mainkan dengan font, dan lihat laman web anda hidup. Selamat coding, dan ingat - di dunia reka bentuk web, batasan satu-satunya adalah imagination anda!

Credits: Image by storyset

Tutorial Sebelumnya:
CSS - Rujukan Browser Web
Tutorial Seterusnya:
CSS - Unit