Artikel ini akan memperkenalkan Anda pada topik sederhana namun penting yaitu Fonts In dan juga akan memberi Anda demonstrasi praktis tentang subjek tersebut. Petunjuk berikut akan dibahas dalam artikel ini,
- Font di CSS
- Atribut dalam Font CSS
- atribut gaya font
- atribut font-weight
- atribut ukuran font
- atribut font-family
Situs web memuat konten dalam bentuk gambar, audio, video, dan konten tekstual. Namun, sebagian besar halaman web masih mengandalkan teks sebagai format utama. Ini karena teks biasa menawarkan beberapa keuntungan yang sangat signifikan.
Keterbacaan non-intrusif - Anda ingin memeriksa skor pertandingan terbaru saat berada di kantor. Jelas Anda menginginkan pembaruan teks cepat, bukan video yang berisik!
Persyaratan bandwidth jaringan rendah - Konten teks dapat dimuat bahkan di area konektivitas internet yang buruk, sedangkan multimedia tidak bisa.
Ramah pencarian - Situs web selalu mengawasi seberapa mudah konten mereka diperhatikan di mesin pencari. Teks paling cocok untuk ini, setidaknya sampai AI sepenuhnya mengambil alih internet!
Saat memformat konten teks, desainer web hanya memiliki beberapa parameter untuk dikerjakan - font, perataan, penyorotan, dan warna. Memilih font yang tepat untuk teks Anda adalah pilihan kritis. Praktik standarnya adalah menggunakan tag font CSS untuk menentukan font pada teks di halaman HTML.
Jika Anda baru mengenal dunia pemrograman HTML, dapatkan tur pemula dasar di sini. Anda mungkin ingin membaca tentang dasar-dasar CSS sebelum melanjutkan belajar tentang font CSS.
Untuk tutorial CSS yang komprehensif, kunjungi Tutorial CSS Edureka Untuk Pemula. Anda akan mendapatkan informasi awal yang luar biasa tentang cara penggunaan CSS untuk meningkatkan desain web HTML.
Pindah dengan artikel ini tentang Font di CSS
Font di CSS
Font pada dasarnya adalah sekumpulan karakteristik yang terkait dengan tampilan teks. Font dibedakan satu sama lain berdasarkan ukuran, lekukan, lebar, kemiringan, dan sebagainya. Mari kita mulai dengan tampilan teks dasar dalam berbagai font.
Contoh 1: Judul dan paragraf dalam berbagai font
body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}Paragraf dengan huruf Georgia tebal miring
Contoh 1: Keluaran
Dalam Contoh 1, kami memiliki 3 baris teks berbeda dalam font berbeda. Anda akan melihat bahwa setiap font bervariasi dalam lebar karakter, lekukan, dll.
Pindah dengan artikel ini tentang Font di CSS
Atribut dalam Font CSS
Font CSS memiliki 4 atribut utama - gaya, berat, ukuran dan keluarga. Atribut gaya menunjukkan normal atau miring. Bobotnya menunjukkan font polos atau tebal. Bobot juga dapat dinyatakan secara numerik. Ukurannya adalah ukuran font yang lebih besar, lebih besar tampilan teks. Ada beberapa cara untuk menentukan ukuran font, penjelasan rinci diberikan di bagian selanjutnya. Atribut keluarga adalah untuk menetapkan nama font ke teks.
Dalam Contoh 1, kami telah menggunakan nama font yang berbeda untuk judul dan paragraf. Di bawah tag h1 dan p, kita melihat dua nama font terdaftar, sedangkan tag h2 hanya menyebutkan satu font. Ini adalah definisi keluarga fonta, lebih lanjut tentang ini nanti.
Pindah dengan artikel ini tentang Font di CSS
atribut gaya font:
Dua gaya utama yang dapat disetel adalah 'normal' dan 'miring'. Huruf miring seharusnya bersifat kursif dengan kemiringan. Normal adalah opsi default yang lurus. Ada opsi lain yang kurang digunakan yang disebut 'miring', yang menyerupai opsi miring di sebagian besar font. Anda juga dapat menyetel gaya ke 'mewarisi' sehingga mengambil gaya font dari elemen induknya.
| Contoh 2: Opsi gaya font | |
| font-family: verdana font-style: normal ukuran font: 15 | Font normal Verdana |
| font-family: verdana font-style: italic ukuran font: 15 | Font miring Verdana |
| font-family: verdana font-style: miring ukuran font: 15 | Font miring Verdana |
Pindah dengan artikel ini tentang Font di CSS
atribut font-weight:
Atribut ini memutuskan apakah font harus tampak tebal atau tipis. Ini dapat diatur ke 'normal' atau 'tebal'. Nilai defaultnya normal. Nilai ini juga dapat ditetapkan sebagai numerik. Berat 400 mewakili normal dan 700 untuk tebal. Ada beberapa pengaturan lain (mulai dari 100 - sangat ringan hingga 900 - sangat tebal), tetapi tidak didukung oleh semua font. Semua opsi bobot ditunjukkan pada Contoh 3.
| Contoh 3: Opsi bobot font | |
| font-family: verdana font-weight: normal ukuran font: 15 | Berat badan verdana normal |
| font-family: verdana font-weight: bold ukuran font: 15 | Berat Verdana yang berani |
| font-family: verdana font-weight: 500 ukuran font: 15 | Bobot numerik verdana |
Pindah dengan artikel ini tentang Font di CSS
atribut ukuran font:
Atribut ukuran dapat disetel dengan berbagai cara. Mari daftar cara-cara di bawah ini.
● Nilai yang disebutkan seperti 'sedang', 'besar'. Faktanya, sama seperti ukuran pakaian, nilainya dapat berkisar dari XX Kecil hingga XX Besar!
● Setel relatif terhadap elemen induknya, sebagai 'lebih besar' atau 'lebih kecil'.
● Persentase ukuran elemen induk.
● Ditetapkan sebagai 'mewarisi' untuk langsung mengadopsi ukuran elemen induk.
● Sebagai nilai absolut dalam satuan px (piksel), pt (titik) atau cm (sentimeter)
'Medium' adalah nilai default yang ditetapkan untuk parameter ini.
Pindah dengan artikel ini tentang Font di CSS
atribut font-family:
Dalam HTML, keluarga font CSS adalah untuk mengatur nama font. Anda bisa saja meletakkan satu nama font dengan tag. Atau Anda dapat menetapkan beberapa nilai sebagai daftar keluarga font yang menentukan prioritas di mana browser harus memilih font.
Daftar tersebut diprioritaskan dari kiri ke kanan, dalam bentuk sistem mundur. Nilai pertama jika tersedia dipilih, atau kontrol beralih ke nilai berikutnya, hingga akhir daftar tercapai. Keluarga font default ditentukan oleh preferensi browser.
Keluarga font CSS terdiri dari 2 jenis - keluarga umum dan keluarga font.
● Keluarga generik - berdasarkan beberapa karakteristik umum, font dikelompokkan sebagai 'serif', 'sans serif', 'monospace', dll. Misalnya, Sans serif berarti font tanpa gaya serif.
● Nama keluarga - font yang termasuk dalam hierarki keluarga tertentu. Times, Arial, Courier adalah semua jenis font dan Times New Roman adalah contoh font dari keluarga Times.
Berbagai opsi penggunaan keluarga font tercantum dalam Contoh 4 di bawah ini.
| Contoh 4: Opsi keluarga font | |
| font-family: verdana | Font tunggal Verdana |
| font-family: 'Times New Roman', Times, Courier | Times New Roman diikuti oleh keluarga font |
| font-family: Arial, minivan, sans-serif | Arial diikuti oleh keluarga generik |
Beberapa hal umum yang perlu diperhatikan
● Seperti beberapa properti CSS lainnya, beberapa pengaturan font berbeda di browser yang berbeda. Periksa dukungan browser sebelum menggunakan beberapa pengaturan font langka.
● Anda dapat menyetel pengaturan font secara terpisah menggunakan tag individual dari font-style, font-weight, dll. Alternatifnya jika Anda lebih suka kode ringkas, Anda dapat menggunakan atribut font singkatan dengan semua nilai dalam baris yang sama.
● Dalam skenario pengguna di mana Anda ingin font bervariasi ukurannya bergantung pada ukuran browser, ada pengaturan ukuran font yang berguna yang disebut pengaturan font responsif. Ini dapat diatur dengan unit vw, yang berarti 'lebar viewport'. Dengan begitu ukuran teks akan mengikuti ukuran jendela browser.
Semoga Anda menemukan informasi yang Anda cari tentang Fonts In CSS. Bagikan pengalaman Anda dengan kami di bagian komentar di bawah. Selamat mendesain!
kelas anonim di java]
Jika Anda tertarik untuk mempelajari lebih lanjut tentang pengembangan web, lihat oleh Edureka. Pelatihan Sertifikasi Pengembangan Web akan membantu Anda mempelajari cara membuat situs web yang mengesankan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery, dan Google API, serta menerapkannya ke Amazon Simple Storage Service (S3).