Misalkan pada suatu hari, kalian menulis sebuah artikel blog, kemudian untuk mempercantik tampilan artikelnya, kalian ingin mengubah besar kecilnya ukuran fontnya, bentuk fontnya & warna fontnya, maka langkahnya adalah sebagai berikut : Show Tambahkan kode html ini <span style="font-size: 12.0pt; line-height: 100%; font-family: script mt bold,serif; color: black"> di awal paragraf, kemudian tutup paragraf tersebut dengan kode html ini </span> Contoh : Bunyi paragrafnya adalah : cara mengubah besar kecilnya ukuran, bentuk & warna huruf-font blog, kemudian akan saya ubah tampilannya menjadi lebih cantik seperti ini : cara mengubah besar kecilnya ukuran, bentuk & warna huruf blog maka susunan kode html plus paragrafnya tepatnya adalah seperti ini : <span style="font-size: 12.0pt; line-height: 100%; font-family: script mt bold,serif; color: black">cara mengubah besar kecilnya ukuran, bentuk & warna huruf blog</span> Keterangan :
Seperti itulah cara mengubah besar kecilnya ukuran, bentuk & warna huruf blog,mudahkan? selamat mencoba, semoga kalian bisa. Pada tutorial sebelumnya, kita sudah belajar gimana cara mengatur teks dengan CSS seperti mengatur alignment, spacing, transform, dan sebagainya. Kali ini kita akan membahas tentang properti 4 yang juga berfungsi untuk mengatur teks. Lebih tepatnya mengatur font pada teks.Ada beberapa properti yang akan kita bahas:
Mari kita mulai.. Mengatur Ukuran FontUntuk mengatur ukuran font, kita bisa menggunakan properti 5. Properti ini dapat kita beri nilai dengan satuan 0 (piksel), 1 (persentase), 2, 3, dan lain-lain.Contoh:
Artinya: Kita akan mengatur ukuran font untuk semua elemen 4 sebesar 5.Secara default ukuran font untuk elemen 4 adalah 7. Ini bisa kita ubah sesuai selera.Selain menggunakan angka, ada juga nilai bawaan yang sudah tersedia seperti:
Biar lebih jelas, mari kita coba latihan. Buatlah file HTML baru dengan nama 7, kemudian isi dengan kode berikut:
Setelah itu, buka dengan web browser. Maka hasilnya: Pada contoh ini, kita mengatur ukuran font untuk elemen 8 adalah 9. Kamu bisa lihat sendiri hasilnya.Lalu ukuran font pada paragraf pertama adalah 0 yang artinya lebih besar dari ukuran normal ( 7).Kemudian pada paragraf kedua, kita tidak mengatur ukuran font-nya. Sehingga akan menggunakan ukuran normal, yakni 7.Kemudian paragraf terakhir kita beri ukuran font-nya dengan 9.Sangat mudah bukan. Silahkan coba eksperimen di inspect elemen, ubahlah ukuran font-nya dari sana. Mengatur Ketebalan FontUntuk mengatur ketebalan font, kita bisa menggunakan properti 6. Properti ini dapat kita berikan nilai berupa angka ukuran ketebalan atau nilai konstan yang sudah ada.Contoh nilai-nilai yang valid:
Contoh penggunaan:
Artinya: Kita akan mengatur ketebalan font semua elemen 4 dengan font yang lebih tebal.Mari kita coba latihan! Buatlah file HTML baru dengan nama 2, kemudian isi dengan kode berikut:
Setelah itu, buka dengan web browser. Maka hasilnya: Pada paragraf pertama, kita mengatur ketebalan font-nya dengan 5, akan tetapi hasilnya normal.Mengapa? Ini karena font yang digunakan tidak memiliki font dengan ketebalan tipis atau 5.Coba ganti jenis font-nya, misalnya pakai roboto. Tambahkan CSS berikut:
Pastikan font 5 sudah terinstal di komputermu.Maka hasilnya akan seperti ini: Ketebalan font pada paragraf pertama akan lebih tipis, karena font Robotopunya ketebalan 5.Mengatur Font StyleProperti 7 digunakan untuk mengatur agar teks miring. Nilai yang valid untuk properti ini adalah:
Contoh:
Artinya: Kita akan mengatur semua elemen 1 dengan style font miring.Biar lebih jelas, mari kita coba latihan. Buatlah file baru dengan nama 2, kemudian isi dengan kode berikut:
Setelah itu, buka dengan web browser. Maka hasilnya: Pada contoh ini, kita mengatur font style untuk elemen 1 menjadi 9 dan 5 menjadi 8.Mengatur Jenis FontUntuk mengatur jenis font, kita bisa gunakan properti 8. Properti ini bisa kita isi dengan nama font dan juga nama family dari font.Secara umum ada lima jenis family font:
Contoh:
Hasilnya: Font yang dipakai akan menggunakan default font yang dipakai pada sistem. Selain menggunakan nama family, kita juga bisa menggunakan nama font-nya langsung. Mari kita coba! Buatlah file HTML baru dengan nama 8, kemudian isi dengan kode berikut:
Setelah itu, buka dengan browser. Maka hasilnya: Coba perhatikan pada kode CSS untuk elemen 8.
Pada kode CSS ini, kita menggunakan tiga font, yakni 0, 1, dan 2.Jika di komputer kita tidak ada font 0, maka font 1 yang akan dipakai. Begitu juga jika tidak ada font 1, maka font 2 yang akan dipakai.Selain menggunakan font yang sudah terinstal di komputer, kita juga bisa menggunakan font yang ada di internet. Contohnya seperti Google Font. Mari kita pelajari.. Menggunakan Font dari GoogleUntuk menggunakan font dari Google Font, kita harus mengimpor font-nya terlebih dahulu dengan tag 7 di HTML atau kata kunci 8 di CSS.Contoh: dengan tag 7 di HTML. 0Contoh: dengan kata kunci 8 di CSS. 1Biar lebih paham, mari kita coba latihan. Buatlah file baru dengan nama 1, kemudian isi dengan kode berikut: 2Pada contoh ini kita belum mengimpor font dari Google. Maka tampilannya akan seperti ini: Font yang digunakan adalah font 2 yang ada di komputer.Sekarang mari kita coba tambahkan font dari Google. Silahkan buka font berikut:
Setelah itu, klik Select this style. Setelah itu, kita akan mendapatkan kode untuk mengimpor font ke HTML. Silahkan copy kode tersebut, kemudian taruh di dalam tag 3 kode kita.Sehingga sekarang kodenya menjadi seperti ini: 3Maka hasilnya: Mantap, sekarang font yang digunakan adalah font dari Google. Apa Selanjutnya?Kita sudah belajar mengatur font dengan properti 4, sebenarnya masih ada lagi properti yang belum kita bahas seperti 5, 6, 7, dan sebagainya.Yang sudah kita bahas di atas, adalah yang paling sering dipakai. Sisanya silahkan lakukan eksperimen sendiri di inspect element. Bagaimana cara pengaturan font size?Mengubah ukuran font. Di perangkat, buka aplikasi Setelan .. Ketuk Tampilan.. Ketuk Lanjutan .. Ketuk Ukuran font.. Pilih ukuran font dengan penggeser.. Berapa ukuran font untuk tugas?Berikut standar format penulisan paper: Kertas: A4. Font: Times New Roman. Ukuran Font: 12.
Sebutkan langkah langkah mengubah font dan font size?Mengubah font default di Word. Masuk ke Beranda, lalu pilih Peluncur Kotak Dialog Font .. Pilih font dan ukuran yang ingin digunakan.. Pilih Atur Sebagai Default.. Pilih salah satu opsi berikut: Dokumen ini saja. Semua dokumen berdasarkan template Normal.. Pilih OK dua kali.. Apa fungsi dari font family?font-family adalah properti CSS yang dapat mengubah jenis font suatu text.
|