Dalam html, ukuran font memainkan peran penting. Ini memungkinkan Anda untuk menarik perhatian pengguna ke informasi penting yang diposting di halaman situs web. Meskipun tidak hanya ukuran huruf yang penting, tetapi juga warna, ketebalan, dan bahkan keluarga.
Tag dan atribut saat merangkak dengan font html
Bahasa hypertext memiliki seperangkat besar alat untuk bekerja dengan font. Bagaimanapun, itu adalah pemformatan teks yang merupakan tugas utama html.
Alasan pembuatan bahasa HTML adalah masalah menampilkan aturan pemformatan teks di browser.
Pertimbangkan tag yang digunakan untuk bekerja dengan font di html dan atributnya. Yang utama adalah tag ... Dengan menggunakan nilai atributnya, Anda dapat mengatur beberapa karakteristik font:
- warna - mengatur warna teks;
- size - ukuran font dalam satuan konvensional.
Nilai atribut positif dari 1 hingga 7 didukung.
- face - digunakan untuk mengatur keluarga font teks yang akan digunakan di dalam tag ... Beberapa nilai didukung sekaligus, dipisahkan dengan koma.
Hanya teks di antara bagian tag font yang dipasangkan yang diformat. Sisa teks ditampilkan dalam font standar default.
Juga di html ada sejumlah tag berpasangan yang menentukan hanya satu aturan pemformatan. Ini termasuk:
- - mengatur font tebal dalam html. Menandai tindakannya mirip dengan yang sebelumnya;
- - ukurannya lebih besar dari default;
- - ukuran font yang lebih kecil;
- - teks miring. Tag serupa ;
- - teks yang digarisbawahi;
- dicoret;- - menampilkan teks hanya dalam huruf kecil;
- - dalam huruf besar.
Teks biasa
Gambar kecil
Gambar kecil
Lebih dari biasanya
Kurang dari biasanya
Huruf miring
Huruf miring
Digarisbawahi
Dicoret
Kemampuan Atribut Gaya
Selain tag yang dijelaskan, ada beberapa cara lagi untuk mengubah font di html. Salah satunya adalah penggunaan atribut gaya generik. Dengan menggunakan nilai propertinya, Anda dapat mengatur gaya tampilan font:
1) font-family - properti mengatur keluarga font. Pencacahan beberapa nilai dimungkinkan.
Mengubah font dalam html ke nilai berikutnya akan terjadi jika keluarga sebelumnya tidak diinstal pada sistem operasi pengguna.
Sintaks penulisan:
font-family: nama font [, nama font [, ...]]
2) ukuran font - ukuran diatur dari 1 hingga 7. Ini adalah salah satu cara utama di mana Anda dapat meningkatkan font dalam html.
Sintaks penulisan:
ukuran font: ukuran absolut | ukuran relatif | nilai | bunga | mewarisi
Ukuran font juga dapat diatur:
- Dalam piksel;
- Dalam nilai mutlak ( xx-kecil, x-kecil, kecil, sedang, besar);
- Dalam persen;
- Dalam poin (pt).
Ukuran font: 7
Ukuran font: 24px
Ukuran font: x-besar
Ukuran font: 200%
Ukuran font: 24pt
3) font-style - mengatur gaya penulisan font. Sintaksis:
gaya font: normal | miring | miring | mewarisi
Nilai:
- normal - ejaan normal;
- miring - miring;
- miring - font miring ke kanan;
- mewarisi - mewarisi ejaan elemen induk.
Contoh cara mengubah font di html menggunakan properti ini:
gaya font: mewarisi
gaya font: miring
gaya font: normal
gaya font: miring
4) font-variant - mengubah semua huruf besar menjadi huruf besar. Sintaksis:
varian font: normal | topi kecil | mewarisi
Contoh cara mengubah font di html dengan properti ini:
varian font: mewarisi
varian font: normal
varian font: huruf kecil
5) font-weight - memungkinkan Anda untuk mengatur ketebalan penulisan teks (saturasi). Sintaksis:
font-weight: tebal | lebih tebal | lebih ringan | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Nilai:
- bold - mengatur font tebal html;
- lebih berani - lebih gemuk relatif terhadap normal;
- lebih ringan - kurang jenuh relatif terhadap normal;
- normal - ejaan normal;
- 100-900 - mengatur ketebalan font dalam ekuivalen numerik.
berat font: tebal
berat font: lebih tebal
berat font: lebih ringan
berat font: normal
berat font: 900
berat font: 100
Properti font dan warna font html
Font adalah properti kontainer lain. Secara internal, itu menggabungkan nilai beberapa properti yang dirancang untuk mengubah font. Sintaks fontnya adalah:
font: font-size font-family | mewarisi
Juga, nilainya dapat diatur ke font yang digunakan oleh sistem dalam prasasti pada berbagai kontrol:
- keterangan - untuk tombol;
- ikon - untuk ikon;
- menu - menu;
- kotak pesan - untuk kotak dialog;
- teks kecil - untuk kontrol kecil
- bilah status - font bilah status.
font: ikon
font: keterangan
font: menu
font: kotak pesan
teks kecil
font: status-bar
font: italic 50px bold "Times New Roman", Times, serif
Untuk mengatur warna font dalam html, Anda dapat menggunakan properti warna. Ini memungkinkan Anda untuk mengatur warna menggunakan kata kunci dan format rgb. Dan juga dalam bentuk kode heksadesimal.
Drop cap adalah huruf pertama paragraf yang lebih besar dari yang lain dan ditempatkan sedemikian rupa sehingga bagian atasnya sejajar dengan baris pertama paragraf. Pada gambar, Anda dapat melihat contoh topi drop yang disematkan dalam teks.
Omong-omong, WordPress memiliki plugin khusus (wordpress.org/extend/plugins/drop-caps) yang memungkinkan Anda membuat teks yang disematkan secara otomatis (dan diimbangi) huruf kapital... Hebat! Namun, bagaimana jika Anda tidak ingin menggunakan plugin (saya yakin tidak), dan Anda hanya perlu membuat drop cap untuk beberapa posting, dan mungkin di lokasi tertentu?
Kabar baiknya: Anda tidak perlu menggunakan plugin untuk membuat huruf kapital, yang Anda butuhkan hanyalah sedikit css dan tag span. Buka file css Anda dan tambahkan kode berikut:
Span.dropcaps (font-family: Georgia, serif; warna: #ccc; ukuran font: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0,09em; posisi: relatif;)
Sesuatu seperti ini. Tentu saja, Anda akan membutuhkan gaya yang sesuai dengan desain dan teks Anda. Misalnya, nilai properti: ukuran font, margin, dan tinggi garis harus dipilih berdasarkan desain dan teks Anda.
tag rentang
Agar gaya diterapkan pada huruf kapital teks, Anda perlu "membungkus" huruf kapital di tag span dan menulis kelas yang sesuai.
A
Elemen semu: huruf pertama
Anda juga dapat menata karakter pertama dalam teks menggunakan: elemen semu huruf pertama. Namun, sejumlah properti terbatas dapat diterapkan ke: elemen pseudo-huruf pertama: ini adalah properti yang terkait dengan font, warna, latar belakang, batas, margin, dan padding. Perlu juga dicatat bahwa: elemen pseudo-huruf pertama tidak akan berfungsi di browser lama.
P: huruf pertama (font-family: Georgia, serif; warna: #ccc; ukuran font: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin -kanan: 0,09em; posisi: relatif;)
Berikut adalah beberapa metode pengeditan. huruf kapital menggunakan CSS.
huruf kapital CSS membantu untuk memecahkan monoton desain seragam, teks yang terlihat sama dari awal sampai akhir.
Sebelumnya dan sekarang drop caps
Penulis sejarah menggunakan huruf kapital dalam manuskrip tulisan tangan, beberapa di antaranya berasal dari abad ke-5. Huruf kapital terus digunakan dari abad ke-8 hingga abad ke-15, ketika mesin cetak mengizinkan pencetakan untuk diindustrialisasi. Kedua topi drop tulisan tangan dan dicetak ditempatkan di awal teks. Mereka sering dihiasi dengan pola dekoratif yang ditempatkan di sekitar surat itu.
Huruf yang dinaikkan dan diturunkan masih digunakan sampai sekarang. Mereka dapat ditemukan di surat kabar, majalah dan buku, serta dalam pencetakan digital. Huruf timbul kadang-kadang disebut diperpanjang. Mereka ditempatkan rata dengan bagian bawah teks yang mengikutinya. Huruf yang dihilangkan ditempatkan rata dengan bagian atas teks, terkadang di lapisan di belakang isi utama konten teks, atau sisa teks mengalir di sekitarnya.
Huruf-huruf yang dimunculkan jauh lebih mudah untuk ditentukan, karena mereka rata dengan sisa teks, dan biasanya Anda tidak perlu mengubah alur di sekitar margin luar untuk melakukan ini. Huruf yang dihilangkan membutuhkan penyetelan yang lebih baik. Akan lebih mudah bagi Anda untuk menyelesaikan ini jika Anda terlebih dahulu memahami bagaimana karakter yang diangkat ditangani.
Menggunakan kelas
Desainer yang sudah akrab dengan CSS tahu untuk membuat kelas CSS terpisah untuk huruf kapital pertama.
CSS untuk elemen paragraf dan kelas yang membuat surat akan terlihat seperti ini:
p (ukuran font: 20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (ukuran font: 48px; font-family: Didot;)
Dan kode HTML akan terlihat seperti ini:
Yang memberi kita:
Sepertinya terlalu mudah? Bahkan, Anda harus melakukan penyesuaian berdasarkan huruf yang dimunculkan, karena setiap huruf kapital memerlukan kerning khusus. Setelah memilih font untuk huruf timbul dan teks isi, Anda perlu membuat kelas terpisah untuk setiap huruf timbul. Di bawah ini CSS class.myinitialcapsi kotak di sebelah kanan negatif untuk mengurangi jarak antara I dan n.
Myinitialcapsi (ukuran font: 48px; font-family: Didot; margin-kanan: -1px;)
n kasus ini, ada beberapa ruang ekstra antara "I" dan "n."
termasuk kelas baru dengan margin negatif menariknya lebih dekat.
Tergantung pada resolusi layar, dalam contoh di atas, I dan n mungkin terlihat seperti menyatu. Ini karena serif di ujung huruf. Oleh karena itu, sebelum memutuskan gaya CSS akhir, uji situs di berbagai perangkat untuk melihat bagaimana teks dalam huruf besar semua CSS terlihat pada mereka.
Kutipan dan kasus khusus lainnya
Anda tidak hanya dapat memperbesar huruf di awal teks. Anda dapat mengimplementasikan kelas lain untuk membuat versi besar dari tanda kutip yang muncul di sebelah huruf. Dalam kasus kami, baik kelas 48-piksel maupun kelas teks 20-piksel tidak cocok untuk tanda kutip. Sebaliknya, itu akan menjadi sesuatu di antara - 30 piksel. Kami akan memindahkan tanda kutip ke bawah 4 piksel untuk menyelaraskannya secara optik dengan I:
Myinitialcapsq (ukuran font: 30px; font-family: Didot; float: kiri; margin-top: 4px;)
termasuk ”kelas baru dengan margin negatif menariknya lebih dekat.
Anda harus sangat berhati-hati dalam menentukan setiap cap CSS, bersama dengan tanda kutip, sehingga kerning dan perataannya cocok dengan markup di sekitarnya. Misalnya, huruf T perlu digeser ke kiri, sedikit di luar tepi paragraf, sehingga garis melintangnya pas secara visual dengan tata letak. Anda perlu melakukan hal yang sama dengan huruf bulat seperti C, G, O dan Q. Dalam contoh ini, ukuran font yang digunakan adalah 20, 30 dan 48. Tetapi Anda harus memilih ukuran berdasarkan spesifikasi font yang Anda pilih. Serta ukuran dan resolusi layar tempat situs akan dilihat.
Elemen semu dan kelas semu
Dengan elemen pseudo CSS, Anda dapat dengan mudah membuat huruf timbul dengan menambahkan :: huruf pertama ke elemen paragraf. Gunakan: huruf pertama ( dengan satu titik dua) untuk browser usang:
p (ukuran font: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; tinggi baris: 2em; padding-bottom: 1.2em;) p :: huruf pertama (ukuran font: 3.6em; transformasi teks: huruf besar; font-family: "Monotype Bernard Condensed", serif; margin-right: 0.03em;) .initialb (margin-right: -0.1em;) .initialn (margin-right: -0,15 em ;)
Kode HTML yang berisi kelas-kelas CSS yang memperhitungkan kerning huruf N dan B akan terlihat seperti ini...
Sebuah huruf awal, dengan huruf pertama menjadi huruf kapital.
Dengan jeda baris, baris berikutnya tidak memiliki batas awal.
n perhatikan di sumber HTML bagaimana huruf pertama, bukan huruf kapital dalam HTML, berukuran hingga ukuran topi awal 3.6em. Rapi, ya?
B ut dengan pengembalian yang sulit, dan paragraf baru dimulai, batas awal yang lain selalu dibuat. Anda mungkin bertanya pada diri sendiri, Bagaimana saya akan mempertanggungjawabkan ini? Apakah saya seharusnya memiliki batas awal di awal paragraf yang sangat baru? Anda bisa. Tapi, apakah Anda ingin terlihat seperti itu, dan apakah itu benar-benar harus terlihat seperti itu?
Huruf kapital pertama paragraf diubah menjadi huruf.
Huruf pertama setelah jeda baris tidak akan dikapitalisasi.
HAI Perhatikan bahwa dalam sumber HTML, huruf pertama tidak menggunakan huruf besar, tetapi diubah menjadi karakter 3.6em.
HAI Namun, bahkan setelah jeda baris yang dipaksakan, dan di awal setiap paragraf baru, sebuah surat selalu dibuat. Anda mungkin bertanya pada diri sendiri: Bagaimana saya memperhitungkan ini? Apakah saya perlu menambahkan huruf untuk semua kasus ini? Anda bisa. Tapi apakah itu perlu?
Bahkan dengan manfaat yang diberikan oleh elemen semu, kami harus menambahkan banyak kode untuk mendefinisikan kelas terpisah untuk menangani masalah kerning dan indentasi. Tetapi metode ini mengubah huruf pertama dari setiap paragraf baru ke CSS menjadi huruf kapital. Bagi sebagian orang, ini mungkin tidak berhasil, karena Anda tidak perlu mengubah huruf pertama setiap paragraf.
Menggabungkan kelas semu dan elemen semu untuk membuat tata letak yang cerdas
Menambahkan kelas semu anak pertama membantu memecahkan masalah konversi huruf pertama yang tidak perlu:
p (ukuran font: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; tinggi baris: 2em; padding-bottom: 0.5em;) p: anak pertama :: huruf pertama ( ukuran font: 3.6em; transformasi teks: huruf besar; font-family: "Monotype Bernard Condensed", serif; margin-kanan: 0.03em;)
Menggabungkan kode ini dengan HTML:
Huruf pertama, yang didefinisikan sebagai anak pertama, adalah satu-satunya huruf yang diubah menjadi huruf kapital dalam metode ini.
Karena hanya huruf yang didefinisikan sebagai anak pertama yang dikonversi, perhatikan bahwa contoh ini berbeda dari yang sebelumnya, tanpa anak pertama. Selain itu, kami tidak mengonversi huruf pertama setelah awal paragraf dan setelah jeda baris yang dipaksakan. Ini terlihat lebih elegan dibandingkan dengan tampilan tata letak saat kami mengonversi semua huruf pertama paragraf.
Keuntungan menggunakan pseudo-class adalah kemampuan untuk menangani berbagai kasus khusus. Bagaimana dengan kekurangannya? Ada banyak kelas semu yang berbeda, dan mereka dapat digabungkan dengan banyak cara sehingga bisa membuat kepala Anda pusing. Misalnya, pseudo-class: first-child dan: first-of-type dapat memberikan hasil yang sama. Anda juga dapat menerapkan kelas semu tidak hanya ke paragraf, tetapi juga ke elemen bagian (ukuran font: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; tinggi baris: 3em;) bagian> p: anak pertama: huruf pertama (ukuran font: 4em; transformasi teks: huruf besar; font-family: Didot, serif; margin-kanan: 5px;) Dan bersama dengan HTML: Di awal bagian, huruf pertama diatur ke tutup drop yang ditinggikan. Dan paragraf baru ... Jika Anda ingin bereksperimen, Anda dapat menjelajahi berbagai metode selain: first-child dan: first-of-type. Misalnya, seperti: nth-of-type atau: nth-of-child untuk melihat bagaimana jenis pseudo-class tertentu dapat digunakan untuk teks dalam CSS huruf besar. Baik Anda mengikuti prinsip-prinsip yang diuraikan dalam artikel ini, atau mulai menggali lebih dalam, setelah Anda belajar bekerja dengan anak pertama kelas semu CSS,: tipe pertama, dan: huruf pertama, Anda dapat menerapkannya dengan benar ke HTML elemen. atau secara detail tentang huruf dan format HTML CSS Bab berisi contoh memformat huruf dari area Hypertext Markup. Di menu sebelah kiri Anda akan menemukan tutorial HTML modern dan sangat detail. Mereka akan memungkinkan Anda untuk membuat situs web Anda dari awal., tetapi untuk saat ini, lihat sedikit di bawah. Ini mungkin menarik. Era masyarakat informasi Kemanusiaan telah memasuki periode baru perkembangannya, di mana teknologi informasi dan jaringan memainkan peran yang sangat penting. Kita hidup di era masyarakat informasi yang ditandai dengan pesatnya perkembangan teknologi informasi dan telekomunikasi. Dengan munculnya komputer dan Internet, perubahan besar dimulai. Komputer dan Internet mendorong masyarakat untuk merumuskan norma perilaku, aturan, dan cita-cita baru. Internet untuk generasi baru adalah apa yang televisi untuk generasi sebelumnya. Tetapi jaringan global jauh lebih fungsional daripada televisi, karena memberikan kesempatan untuk melakukan pembelian, penjualan, menawarkan komunikasi dan berbagai cara ekspresi diri, seperti menciptakan halaman dan situs internet pribadi. Contoh format surat: Hasil pemformatan: Contoh teks bebas yang ditulis dengan huruf besar Contoh teks bebas ditulis dengan huruf kapital Tag: - mendefinisikan huruf besar(tag ini tidak didukung dalam HTML 5). CSS style = "text-transform: huruf besar" kode - mendefinisikan huruf kapital.
Dengan kata lain, huruf kapital didefinisikan menggunakan CSS atribut. Contoh format surat: Hasil pemformatan: Teks HTML sewenang-wenang dan spasi huruf CSS 2px Deskripsi atribut dan nilai: CSS style = kode "spasi huruf: 2px" - mendefinisikan Spasi huruf CSS.
Cari contoh pemformatan serupa di menu di sebelah kiri. Terima kasih atas perhatian Anda. Memungkinkan Anda untuk mengubah huruf besar dari teks. Secara default, nilai disetel ke none, yang tidak berpengaruh pada teks. Kasus teks tetap sama. Nilai huruf besar dan huruf kecil masing-masing mengubah karakter menjadi huruf besar dan kecil. Jika Anda menentukan nilai kapitalisasi, maka hanya karakter pertama dari setiap kata yang akan dikapitalisasi. Mewarisi mewarisi nilai dari induknya. Properti Text-transform telah diterapkan ke paragraf ini dengan Nilai Huruf Kecil, yang berarti semua huruf akan menggunakan huruf kecil. Dan paragraf terakhir ini memiliki properti text-transform dengan properti CAPITALIZE yang diterapkan. Huruf pertama dari setiap kata akan menjadi huruf besar, dan hanya itu.Huruf HTML: kapital dan huruf besar
Huruf HTML dan jarak CSS di antara mereka
Contoh
h3 (transform teks: huruf besar;) .huruf kecil (transform teks: huruf kecil;) .capitalize (transform teks: kapitalisasi;)
Ini adalah judulnya. Ini memiliki properti transformasi teks yang diatur ke huruf besar. Semua karakter akan menjadi huruf besar.