Hampir rumit atau belajar CSS3. Bagian 4. 1. Font dalam dokumen HTML. Properti font-family dan @ font-face

Halo, para pembaca yang terhormat dari situs remontcompa.ru! Nama saya Roman Nahvat dan saya sajikan kepada Anda bagian keempat dari serangkaian artikel tentang bahasa gaya CSS. Pada bagian ini, kita akan mengeksplorasi berbagai properti CSS untuk memformat teks dalam dokumen HTML. Karena memformat teks dalam CSS adalah topik yang cukup luas, bagian keempat akan dibagi menjadi beberapa sub-bagian. Bukan rahasia bagi siapa pun bahwa desain situs sangat tergantung pada jenis komponen teks di dalamnya. CSS memiliki banyak properti untuk memformat teks dalam dokumen HTML. Properti ini memungkinkan Anda untuk menetapkan font, warna, ukuran, penspasian garis, dan karakteristik lainnya pada teks. Misalnya, properti font-family dan @ font-face CSS yang akan kita lihat hari ini dirancang untuk bekerja dengan font pada halaman web..

Hampir rumit atau belajar CSS3. Bagian 4. 1. Font dalam dokumen HTML. Properti font-family dan @ font-face

Setiap font bersifat individual dengan caranya sendiri dan berbeda dari font lain dalam gayanya. Tetapi meskipun demikian, font memiliki fitur umum dan umum. Font ini atau itu bisa milik keluarga tertentu. Sebagai contoh, font Times New Roman milik keluarga serif (serif font), dan font Arial milik keluarga sans-serif (font sans-serif). Ada juga keluarga monospace (font milik keluarga ini memiliki karakter dengan lebar tetap yang sama), dan font kursif meniru tulisan tangan. Tabel di bawah ini menunjukkan font family dan beberapa perwakilan dari family ini

Properti font-family CSS digunakan untuk menentukan font untuk teks yang akan digunakan di dalam elemen dalam dokumen HTML. Font dapat ditentukan dengan dua cara: Dengan menulis nama font sebagai nilai untuk properti font-family (misalnya, font-family: arial) Dengan menulis nama font family sebagai nilai properti font-family (misalnya font-family: serif) Saat menentukan font menggunakan properti font-family, Anda harus mempertimbangkan fakta bahwa browser web itu sendiri tidak memiliki font bawaan. Untuk menampilkan teks pada halaman web, font yang dipasang di sistem operasi pada komputer pengguna digunakan. Properti font-family CSS memungkinkan Anda menentukan bukan hanya satu font, tetapi beberapa font sebagai nilai, memisahkan nama mereka dengan koma. Praktik yang umum adalah menunjukkan nama keluarga di akhir daftar font. Ini dilakukan jika font yang ditentukan sebagai nilai untuk properti font-family tidak tersedia di sistem operasi pengguna. Jika Anda menentukan beberapa font sebagai nilai untuk properti font-family, browser web, setelah menemukan font yang ditentukan pertama, memeriksa untuk melihat apakah itu diinstal pada komputer pengguna. Jika font ini ada, browser web menggunakannya sebagai font untuk elemen pada halaman web. Jika font yang ditentukan pertama sebagai nilai untuk properti font-family tidak diatur, maka font kedua dicentang, dll. Jika tidak ada font yang ditentukan yang ditemukan, browser web memilih font yang sesuai dari kelompok font yang ditentukan. Buat dokumen HTML dengan struktur berikut dan simpan di flash drive di folder CSS di bawah font nama dan ekstensi .html

Dalam dokumen HTML, font.html dengan tag

dan

buat dua paragraf dengan beberapa teks

Kami mendapatkan jenis halaman web berikut font.html

Juga di folder CSS pada flash drive, simpan file gaya fonts.css

Tetapkan pengidentifikasi font1 dan font2 masing-masing ke paragraf pertama dan kedua

Menggunakan pemilih pengidentifikasi, di stylesheet fonts.css, tetapkan font Georgia, Times New Roman, Times ke teks pada paragraf pertama dengan menulis baris # font1 font-family: Georgia, 'Times New Roman', Times, serif. Anda dapat memperhatikan bahwa setelah nama font nama umum mereka diindikasikan (serif)

Kami mendapatkan yang berikut ini

Saat menetapkan font ke elemen dalam dokumen HTML, Anda juga harus mempertimbangkan format font itu sendiri, karena browser web yang berbeda mendukung format font yang berbeda. Untuk menampilkan font yang sama di browser web yang berbeda, Anda harus menyediakannya dalam format yang berbeda

Jenis huruf Open Embedded (dengan ekstensi .eot) hanya didukung di Internet Explorer.

Font TrueType (.ttf) dan OpenType (.otf) didukung oleh semua browser web modern. Mengenai dukungan untuk font TrueType dan OpenType oleh Internet Explorer, dari versi 6 ke versi 8 font TrueType dan OpenType tidak didukung oleh browser ini, dan versi 9, 10 dan 11 Internet Explorer hanya mendukung font TrueType dan OpenType secara parsial

Font Web Open Font (.woff) adalah versi terkompresi dari font TrueType atau OpenType dan didukung oleh semua browser web modern, serta Internet Explorer, mulai dari versi 9

Font dengan ekstensi .woff2 adalah versi terbaru dari format Font Web Open dan didukung oleh semua browser web modern, namun, tidak ada versi browser web Internet Explorer yang mendukung font dengan ekstensi ini.

Font Scalable Vector Graphic (.svg) serta TrueType, OpenType dan Web Open Font didukung oleh browser web modern, termasuk di perangkat seluler

Mari kita mengatur beberapa font untuk teks paragraf kedua pada halaman web font.html, menyediakannya ke browser web dalam berbagai format. Situs web Google Fonts di https://fonts.google.com memiliki lebih dari 800 font gratis milik keluarga yang berbeda.

Kami menampilkan font serif pada situs web Google Fonts dengan mencentang kotak yang sesuai.

Misalnya, untuk teks paragraf kedua dari halaman web font.html, atur font yang disebut IM Fell DW Pica SC. Klik pada tanda plus untuk memilih font ini.

Selanjutnya, klik tombol unduh

Simpan arsip dengan file font IM Fell DW Pica SC pada flash drive di folder CSS

Setelah membongkar arsip yang diunduh, dalam folder IM_Fell_DW_Pica_SC kita melihat file font IMFePIsc28P

File font yang diunduh memiliki ekstensi .ttf, yaitu font dari format TrueType. Seperti yang kita lihat di atas, font dengan ekstensi .ttf tidak didukung oleh Internet Explorer. Karena kami ingin font ini ditampilkan di browser web apa pun, kami perlu mengonversinya ke format lain, termasuk format Tipe Tertanam Tertanam, yang didukung oleh browser web Internet Explorer versi 6-11

Untuk mengonversi file font IMFePIsc28P.ttf yang diunduh ke format lain, buka https://www.fontsquirrel.com/tools/webfont-generator dan klik tombol Unggah Font

Pilih file font yang diunduh IMFePIsc28P.ttf dan klik Buka

Periksa Ya, font yang saya unggah berhak secara hukum untuk penyematan web, dan juga mengatur peralihan ke Pakar

Letakkan tanda centang di depan format yang ingin kita konversi file font IMFePIsc28P.ttf

Klik Unduh Kit Anda

Simpan arsip dengan font IM_Fell_DW_Pica_SC dikonversi ke format yang berbeda pada flash drive di folder CSS

Kami akan masuk ke folder webfontkit-20190307-050537 dan melihat file font IM_Fell_DW_Pica_SC dengan ekstensi .eot, .svg, .ttf, .woff, .woff2 di dalamnya. Kami juga tertarik dengan file stylesheet dengan ekstensi .css, yang menampilkan kode properti CSS @ font-face, yang akan kami gunakan untuk menghubungkan font IM_Fell_DW_Pica_SC dalam berbagai format ke halaman web font.html

Properti CSS @ font-face memungkinkan Anda untuk menggunakan font yang berbeda, meskipun font tersebut tidak diinstal pada komputer pengguna. Pertimbangkan kode css dalam file stylesheet.css lebih terinci. Di dalam properti @ font-face adalah properti font-family CSS lain yang memberikan nama font. Nama font akan digunakan di masa depan untuk menunjukkan font ke teks (dalam kasus kami, untuk teks paragraf kedua pada halaman font.html). Properti src memberi tahu browser web jalur ke file font

Salin kode CSS dari file stylesheet.css dan kemudian rekatkan ke file fonts.css, yang terhubung di halaman web font.html. Kami mendapatkan yang berikut ini

Karena pada halaman font.html kami menetapkan pengidentifikasi ke paragraf kedua dengan nama font2, oleh karena itu, dalam file gaya fonts.css, menggunakan pemilih pengidentifikasi kami akan menetapkan teks dalam paragraf kedua ke font dengan nama yang ditentukan sebagai nilai untuk properti font-family, yaitu im_fell_dw_pica_scregular

Dalam file gaya fonts.css, tulis baris # font2 font-family: 'im_fell_dw_pica_scregular'

Agar teks paragraf kedua ditampilkan dalam font bernama im_fell_dw_pica_scregular, salin file font ini dalam berbagai format dari folder webfontkit-20190307-050537 ke folder CSS.

Kami mendapatkan yang berikut ini

Jika Anda membuka halaman font.html di browser web, Anda dapat melihat bahwa teks paragraf kedua ditampilkan dalam font IM Fell DW Pica SC