Atur font teks. Atribut wajah dari tag font. Cara membuat font cantik di html: ukuran, warna, tag font html

Tampaknya, mengapa mengetahui tag HTML untuk teks, jika sekarang hampir semua panel admin memiliki panel admin yang nyaman yang mengaturnya secara otomatis?

Faktanya adalah memformat konten di situs web pada dasarnya berbeda dengan bekerja di aplikasi perkantoran. Di sini tidak cukup hanya memberikan tampilan teks yang menarik, karena tidak hanya tampilan halaman web, tetapi juga promosinya di mesin pencari bergantung pada desain yang benar.

Tag dan Atribut HTML: Sintaks Dasar

Teks apa pun memiliki kode tersembunyi yang “menjelaskan” kepada komputer apa dan bagaimana menampilkannya di layar. Semua informasi dicatat menggunakan sekumpulan elemen universal.

Pada dasarnya, tag teks HTML adalah perintah yang menambahkan blok tertentu ke halaman atau mengubah tampilannya. Format rekaman yang benar terlihat seperti ini:

Harap dicatat bahwa tidak semua tag dipasangkan. Misalnya,
(lewati baris) atau

(menambahkan garis horizontal) tidak perlu ditutup sama sekali.

Mengapa Anda tidak dapat menyalin artikel dari Word dan program lain ke editor situs web

Meskipun program perkantoran modern menggunakan tag HTML yang sama untuk teks, 99% kode asli tidak dapat digunakan untuk halaman web. Meskipun dokumen ditampilkan secara normal di aplikasi itu sendiri, saat dimasukkan ke situs web, formatnya mungkin hilang. Selain itu, karena banyaknya tag dan atribut yang tidak perlu, mesin pencari tidak dapat menganalisis konten halaman secara memadai. Hal ini, pada gilirannya, mempersulit promosi sumber daya Anda.

Untuk mendapatkan kode yang bersih dan relevan, pertama-tama Anda harus menghapus teks tag HTML yang dihasilkan oleh editor biasa. Ada beberapa cara untuk melakukan ini:

  1. “Jalankan” artikel melalui Notepad dan baru kemudian masukkan ke situs. Aplikasi ini menghapus semua HTML, jadi setelah itu Anda harus memformat teks lagi (menggunakan alat editor atau secara manual).
  2. Tulis dan publikasikan artikel menggunakan LiveWriter. Editor blog populer segera menghasilkan kode yang benar. Dan di tab terpisah Anda dapat melihat bagaimana teks di situs tersebut akan terlihat.
  3. Gunakan Pembersih HTML. Layanan online ini tidak menghancurkan seluruh kode, tetapi hanya bagian yang tidak perlu. Dengan menggunakan filter, Anda memilih tag mana yang ingin Anda simpan. Ada juga editor pemformatan visual yang kuat yang menambahkan perintah yang sudah dioptimalkan ke dalam kode.

Paragraf

Elemen ini hadir di hampir semua artikel. Setiap paragraf harus ditempatkan di dalam wadah seperti itu - ini menyederhanakan pemformatan dan memungkinkan Anda mempertahankan gaya yang konsisten di semua halaman situs. Untuk kenyamanan, tag

Selalu menulis di baris baru.

Penyelarasan

Tag HTML terpisah "Perataan Teks" sudah lama tidak digunakan. Sebaliknya, atribut ALIGN generik telah dibuat. Untuk mengubah posisi blok teks pada halaman, Anda harus memilih salah satu dari 3 nilai - PUSAT, KANAN atau KIRI. Anda dapat mengatur perataan elemen lain, seperti judul, dengan cara yang sama.

Dalam beberapa situasi, tag lain digunakan untuk penyelarasan, misalnya, Anda dapat memposisikan menggunakan elemen

...
. Mengapa tag terpisah berguna? Berbeda dengan atributnya, atribut ini berfungsi dengan konten apa pun, termasuk foto, video, flash, dll.

Judul dan subjudul

Sistem subjudul memungkinkan Anda membuat struktur konten yang logis. Ketika teks dibagi menjadi blok-blok yang bermakna, pembaca akan lebih mudah berkonsentrasi dan menyerap informasi baru. Mesin pencari juga menganalisis berita utama untuk memahami kueri apa yang ingin dipromosikan halamannya. Inilah sebabnya mengapa pakar SEO merekomendasikan penggunaan kata kunci topikal di dalamnya.

HTML menggunakan enam tingkat subjudul - dari

ke

. Ada hierarki yang jelas dalam sistem ini:

  • ...

    . Artikel utama, produk di toko online, dll). Hanya ada satu di dalam teks

    . Biasanya, ini berisi kata kunci utama.

  • ...

    . Subjudul tingkat kedua memecah teks menjadi blok-blok yang bermakna. Misalnya, jika Anda menilai laptop, Anda dapat melakukan beberapa hal

    dengan nama model yang berbeda.

  • ...

    . Level ketiga diperlukan jika teks berada di antara dua

    juga dipecah menjadi blok-blok kecil. Dalam contoh kita, ini dapat berupa kriteria evaluasi - “Kinerja”, “Memori”, “Kartu video”, dll. untuk setiap model.

  • ,

    ,
    . Dalam praktiknya, hal ini sangat jarang terjadi. Namun prinsip umumnya sama - mereka harus "bersarang" di blok dengan subjudul tingkat atas.

Pastikan untuk mempertahankan hierarki yang benar. Kembali ke contoh kita, ini berarti Anda tidak dapat langsung memasukkan nama model sebagai

atau

. Terlebih lagi, gunakan subjudul dari tingkat yang berbeda untuk blok makna yang homogen (misalnya, sorot laptop yang menempati peringkat terakhir menggunakan
).

Berikut adalah diagram yang akan membantu Anda langsung memahami dan mengingat struktur judul yang benar dalam HTML.

Daftar

Lebih baik memformat daftar dan instruksi apa pun dalam bentuk daftar, menggunakan tag HTML khusus untuk teks (kesalahan umum hanya beberapa paragraf

Yang dimulai dengan tanda hubung atau angka).

Struktur blok tersebut sangat sederhana. Pertama, kita menentukan jenis daftar - berpoin atau bernomor.

Semua elemen berada di antara tag pembuka dan penutup. Setiap item daftar dimulai pada baris baru dan memiliki format . Jumlah elemen tidak dibatasi.

Pilihan dan atributnya

Apa yang bisa diubah menggunakan font dan warna ini - dan tanpa menambahkan kelas baru ke CSS. Ini sangat berguna ketika Anda hanya perlu menyorot satu kalimat atau bagian.

memiliki beberapa atribut:

  • Menghadapi. Memungkinkan Anda mengubah font teks. Anda dapat membuat daftar beberapa opsi yang dipisahkan dengan koma (Tahoma, Verdana). Jika pengguna tidak menginstal font pertama, sistem hanya menggunakan font alternatif.
  • Ukuran. Untuk memperbesar atau memperkecil teks, masukkan nilai antara 1 dan 7 dalam tanda kutip.
  • Warna. Tergantung pada desainnya, Anda dapat memilih salah satu warna standar (merah, hijau, biru) atau memasukkan kode untuk warna pilihan Anda.

Jangan gunakan paragraf yang diformat dengan , bukan subjudul. Lebih baik mengatur parameter desain yang sama dengan tag yang benar.

Cara menyorot teks

Teks yang monoton memang melelahkan, bahkan dipecah menjadi beberapa paragraf. Untuk menarik perhatian dan membangkitkan minat pembaca, disarankan untuk menyorot poin-poin penting secara grafis. Berikut beberapa perintah yang akan membantu Anda mengatasi tugas ini.

... . Tag HTML yang sangat populer. Teks tebal langsung menarik perhatian, sehingga nyaman digunakan untuk menyorot poin dan fakta penting.

Banyak orang bingung membedakan tag Dan . Tidak ada perbedaan visual, tetapi cara kerjanya berbeda. Yang pertama hanya mengubah tampilan teks, dan yang kedua bertindak sebagai "indeks" dan menyoroti fragmen yang paling penting (topik kata kunci dan frase untuk SEO).

... . Huruf miring yang elegan dan tegas ideal untuk desain istilah ilmiah, kata-kata asing, dan berbagai kutipan. Dalam publikasi serius, nama karya seni juga dicetak miring.

... . Mungkin tidak ada tag HTML lain yang menimbulkan begitu banyak kontroversi. Menggarisbawahi teks jarang digunakan, karena metode penyorotan ini secara historis dikaitkan dengan hyperlink. Jika Anda menggunakan dalam artikel, harap dicatat bahwa ini hanya cocok untuk fragmen pendek - tidak lebih dari 1 baris.

... . Tag menarik yang memungkinkan Anda membuat bagian. Sangat relevan dalam periklanan - misalnya, untuk menekankan kontras antara harga lama dan baru.

... . Cara termudah untuk memperbesar ukuran font tanpa opsi tambahan apa pun.

... . Ia bekerja dengan prinsip yang sama seperti tag sebelumnya. Teks di dalamnya diperkecil dibandingkan dengan teks utama.

... . Nama yang benar untuk format ini adalah superskrip. Tag ini terutama ditujukan untuk gelar matematika dan catatan kaki. Ini mengurangi ukuran font dan memindahkan teks yang dipilih ke atas.

... . Subskrip sering ditemukan dalam berbagai rumus. Fragmen yang dipilih terletak di bawah teks utama.

Wadah yang bermakna

Karena beberapa blok ditemukan di banyak teks, tag khusus mulai dibuat untuknya. Ini menyederhanakan pemformatan, karena jika setiap jenis konten memiliki kumpulan gayanya sendiri, Anda hanya perlu menyorot sepotong teks dan menunjukkan informasi apa yang dikandungnya.

... . Tag untuk menambahkan kode komputer. Sangat diperlukan dalam artikel tentang pemrograman dengan contoh - perintah tidak dijalankan, tetapi ditampilkan sebagai teks biasa.

... . Dirancang untuk memformat kutipan - misalnya, kutipan penting dari sebuah wawancara.

. Tempatkan bagian teks ke dalam blok terpisah. Secara default, pilihannya memiliki lebih banyak padding kiri, namun Anda juga dapat mengubah ukuran, gaya font, dan warna teks dalam CSS.

...
. Tag tambahan yang berisi informasi tentang penulis, termasuk link.

garis pemisah

Garis sederhana dapat digunakan untuk menandai akhir logis dari suatu bagian besar.

tidak berlaku untuk tag berpasangan. Artinya elemen format penutuptidak diperlukan.

Dengan menggunakan atribut WIDTH, Anda dapat memperpendek pemisah dengan menentukan ukuran yang sesuai dalam piksel atau persentase lebar jendela.

Dengan mempelajari cara menggunakan tag dengan benar untuk memformat teks dalam HTML, Anda tidak hanya akan membuat artikel Anda lebih mudah dibaca, tetapi juga meningkatkan efektivitas SEO Anda.

Salam untuk semua pembaca artikel ini dan pelanggan blog saya! Saya ingin mengabdikan publikasi hari ini pada topik yang tanpa sepengetahuan sumber daya Internet Anda tidak akan dapat dibaca dan menarik: “Cara mengatur font dalam HTML.” Topiknya sendiri mudah dan saya yakin Anda akan menguasainya dengan cepat.

Namun, kita tidak boleh lupa bahwa bahasa web kaya akan segala jenis alat desain font yang idealnya perlu Anda ketahui. Setelah membaca artikel ini, Anda akan dengan percaya diri menguasai pemformatan teks, mempelajari cara mengatur berbagai gaya, jenis gaya dan dekorasi font, serta mengubah ukuran dan warna kalimat dan huruf individual. Mari kita mulai!

Font berbeda

Sebagian besar tanda, pers dan literatur, situs web, dan layanan lainnya menggunakan font standar. Meski nyaman, namun sudah lama menjadi membosankan dan tidak menarik perhatian. Itu sebabnya banyak desainer sedikit mengubah jenis desain atau menciptakan gaya baru sama sekali. Font yang paling terkenal dan berpengaruh adalah:

  • Helvetica;
  • masa depan;
  • garamond;
  • Bodoni;
  • Bembo;
  • Rockwell;
  • Times New Roman.

Perbedaan utama mereka terletak pada hubungan mereka dengan keluarga tertentu. Ada keluarga serif (serif), sans serif, dekoratif, miring, dan monospace.

Saya juga ingin menekankan bahwa ada 5 ukuran font.

Mari kita mulai dengan bahasa html dan “kemampuan kreatifnya”

Memformat teks menggunakan tag html

Nama Pertama tajuk

P subtitle dengan huruf merah!

Di sini letaknya Pertama ayat saat ini contoh. Untuk kejelasan kata-kata ini akan ditulis miring.

Izinkan saya mengingatkan Anda bahwa atributnya sejajar = "tengah" mengatur teks untuk ditampilkan di tengah.

Dan kini saatnya css unjuk kebolehan

Meskipun berbagai macam tag disediakan oleh html, css adalah alat yang lebih nyaman dan fleksibel untuk mendesain tampilan font.

Properti utama yang digunakan untuk memformat konten adalah: font dan komponennya: dekorasi teks.

Mari kita lihat dulu font. Ini adalah parameter universal, berkat itu Anda dapat menetapkan beberapa nilai secara bersamaan. Selain itu, setiap parameter beroperasi dengan kata kuncinya sendiri.

Nama properti Kata kunci
font-keluarga Dapat diinstal sebagai keluarga font standar:

· tanpa serif (sans-serif);

· antik (serif);

· dekoratif (fantasi);

· miring (kursif);

· ruang tunggal (monoruang),

Begitu juga dengan gaya standar yang ada (Arial, Calibri, dll).
ukuran font Untuk mengatur ukuran mutlak suatu simbol digunakan notasi berikut: xx-kecil, x-kecil, kecil, sedang, besar, x-besar, xx-besar. Anda juga dapat menentukan nilai unik.
berat font Bertanggung jawab atas saturasi gaya teks. Perubahan rentang atau ditentukan menggunakan kata normal, tebal, lebih terang, atau lebih tebal.
varian font Menentukan representasi huruf menggunakan kata kunci: huruf kecil, normal, atau warisan.
gaya font Menetapkan normal, miring, miring, atau mewarisi induk.
peregangan font Menunjukkan kepadatan huruf. Nilai-nilai berikut dapat ditentukan: ultra-kondensasi, ultra-diperluas, ekstra-kondensasi, ekstra-diperluas, semi-kondensasi, semi-diperluas, normal, diperluas, dipadatkan, dan diturunkan.

Milik dekorasi teks membantu menghias teks dengan elemen tambahan seperti garis bawah ( menggarisbawahi), dicoret ( garis-melalui), garis atas ( garis atas), dan juga mewarisi parameter induk ( mewarisi) atau batalkan semua pendaftaran ( tidak ada).

Sekarang saatnya untuk contoh kedua. Saya mengambil kode sebelumnya dan menatanya menggunakan css. Jadi, judulnya dihias dengan bayangan (menggunakan properti teks-bayangan) dan dengan garis luar di sekelilingnya ( berbatasan-warna). Pada saat yang sama, saya memperbesar satu kata. Saya juga ingin menggunakan parameternya kegelapan untuk mengatur transparansi subtitle.

Memformat teks menggunakan properti css

Nama Pertama tajuk

Subjudul tembus pandang!

Di sini letaknya Pertama ayat saat ini contoh. Untuk kejelasan kata-kata ini akan ditulis miring.

Kita semua pernah menggunakan editor teks terkenal Word. Dan kita tahu bahwa sangat mudah untuk mengubah font, ukuran dan warna teks. Jadi, di html Anda juga dapat mengatur parameter ini tanpa banyak kesulitan. Ada tag untuk ini . Itu berpasangan dan karena itu memiliki tag penutup, karena browser perlu memahami di mana awal dan akhir teks yang parameternya kita ubah. Menandai memiliki tiga atribut: wajah, ukuran dan warna, yang masing-masing menentukan font, ukuran dan warna teks. Dalam tutorial ini kita akan melihat lebih dekat pada font.

Ke mengubah font teks dalam html– file, kita harus menyertakan teks dalam tag Dan dan pastikan untuk melamar atribut wajah. Ini terlihat seperti ini:

teks kita



Nama font dapat dilihat di editor Word. Daftarnya cukup panjang. Mari kita ambil contoh cara mengubah font teks di html dan menulis kode berikut:

Pelajaran 4. Font dalam html

Teks ini akan ditulis dalam font default

Teks ini akan ditulis dengan font Batang

Teks ini akan ditulis dalam font Comics Sans MS

Mari simpan file dengan nama apa pun dan lihat apa yang terjadi:

Seperti yang bisa kita lihat, semuanya berfungsi: paragraf pertama memiliki font default, di paragraf kedua kami mengatur font Batang, dan di paragraf ketiga teks ditampilkan dalam font Comic Sans MS. Pada prinsipnya semuanya mudah dan dimengerti, tetapi ada satu catatan. Karena font yang ditentukan tidak disimpan dalam file HTML, tidak ada jaminan bahwa font tersebut akan ditampilkan seperti yang diharapkan di browser. Kami tidak bisa yakin 100% bahwa komputer pengunjung memiliki font yang kami tentukan, apalagi jika font tersebut tidak standar. Oleh karena itu, pada atribut face sebaiknya dicantumkan sekitar tiga nama font, yang dicantumkan dipisahkan dengan koma, sehingga setidaknya salah satunya pasti ditampilkan. Mari kita lihat sebuah contoh:

Pelajaran 4. Font dalam html

Teks ini seharusnya muncul di Batang atau Comic Sans MS, atau tentunya di Arial.

Mari kita lihat hasilnya:


Teks ditampilkan dalam font Batang, yang pertama kali kita tentukan di atribut face. Jika font ini tidak berfungsi di browser pengunjung, maka font kedua akan berfungsi - Comic Sans MS, dan jika font ini tidak berfungsi, maka teks pasti akan ditampilkan dalam font Arial.

Opsi font lainnya

Dan sebagai permulaan, mari kita lihat opsi font lainnya. Pada pelajaran pertama, kita telah melihat tag yang dicetak tebal dan miring, ini adalah tag Dan masing-masing. Mari kita lihat beberapa tag lagi yang mengatur gaya font:

Pelajaran 4. Opsi font lainnya

Mari kita garis bawahi teksnya
Mari kita coret bagian ini
dan atur superskrip pada kata tersebut atas

Mari kita lihat hasilnya:


Kami mengatur seluruh teks ke font Comic Sans MS, baris pertama digarisbawahi menggunakan tag , ingat dari pelajaran pertama bahwa tag
membuat baris baru, baris kedua dicoret berkat tag dan pada baris terakhir kita beri kata "top" pada superscriptnya. Tidak ada yang rumit! Anda dapat bereksperimen sendiri dengan tag lainnya. Jika semuanya sudah jelas bagi Anda, Anda dapat melanjutkan ke pelajaran berikutnya, di mana kita akan melihat cara mengatur ukuran teks, tetapi jika Anda memiliki pertanyaan, tonton video detail pelajaran ini.

Untuk mengubah font gunakan tag dengan atribut WAJAH. Anda dapat menentukan font berdasarkan nama (Arial, Tahoma, Verdana) atau jenisnya (misalnya, monospace). Dianjurkan untuk mencantumkan beberapa nama font untuk menghindari situasi di mana ternyata pengguna tidak menginstal font yang diperlukan. Saya sarankan menggunakan setidaknya salah satu font yang diterima secara umum (misalnya Arial). Saya tidak menyarankan menggunakan lebih dari 2-3 font berbeda dalam satu halaman, jika tidak halaman akan terlihat kikuk dan tidak profesional.

Contoh:

Mengubah ukuran font halaman html

Untuk mengubah ukuran font, gunakan atribut SIZE. Semakin besar fontnya, semakin mudah teksnya dibaca. Namun, font kecil memungkinkan Anda memasukkan lebih banyak informasi ke dalam layar. Menggunakan atribut ini dengan tag , Anda dapat mengubah ukuran teks seluruh halaman web. Menggunakan atribut SIZE bersama dengan tag , Anda dapat memengaruhi tampilan satu bagian teks. Tersedia 7 ukuran font. Yang terkecil diberi angka 1, dan yang terbesar diberi angka 7.

Anda dapat mengubah font menggunakan tag Dan . memperbesar font dari fragmen yang ditentukan sehubungan dengan teks sebelumnya, dan , karenanya, berkurang.

Dengan mengubah ukuran masing-masing huruf, Anda dapat memperoleh efek menarik. Misalnya, dengan cara ini Anda bisa mendapatkan drop cap - huruf kapital besar di awal paragraf.

Contoh:

Memilih warna font halaman html

Menampilkan bagian teks halaman Web dalam font berwarna berbeda membuatnya lebih menarik.

Menggunakan atribut TEXT dalam konteks tag , Anda dapat mengubah seluruh warna teks halaman web. Menerapkan atribut COLOR dengan tag (memiliki prioritas lebih tinggi) memungkinkan Anda berinteraksi dengan tampilan sepotong teks.

Untuk mengubah warna teks, Anda perlu mengetahui nama warna atau kode heksadesimalnya. Kode tersebut terdiri dari simbol pon # dan angka yang mewakili intensitas komponen warna merah, hijau, dan biru. Hanya 16 warna standar yang dapat disebutkan namanya.

Nama warna Kode aqua ##00FFFF hitam ##000000 biru ##0000FF fuchsia ##FF00FF abu-abu ##808080 hijau ##008000 kapur ##00FF00 maroon ##800000 navy ##000080 zaitun ##808000 ungu ##800080 merah # #FF0000 perak ##C0C0C0 teal ##008080 putih ##FFFFFF kuning ##FFFF00

Dari penulis: Selamat datang di halaman blog Webformyself. Pada artikel kali ini saya ingin menjawab pertanyaan bagaimana cara mengatur font di html. Beberapa orang masih melakukannya dengan cara yang salah, jadi penting untuk menyelidiki masalah ini secara lebih mendalam.

Bagaimana font diatur sebelumnya

Sebelumnya, html menggunakan tag font berpasangan khusus yang berfungsi sebagai wadah untuk mengubah parameter font seperti jenis huruf, warna, dan ukuran. Saat ini pendekatan ini pada dasarnya salah. Mengapa? Standar web menetapkan bahwa tampilan halaman tidak boleh ditentukan dalam markup html. Selain itu, tag ini didukung sepenuhnya hanya di versi HTML yang sangat lama - HTML 3.

Setting font di html dengan benar

Saat ini, untuk tujuan ini, ada baiknya menggunakan kemampuan CSS secara eksklusif. Bahasa ini diciptakan justru untuk menentukan penampilan melaluinya. Selain itu, CSS memiliki lebih banyak properti yang mempengaruhi tampilan teks. Mari kita lihat sedikit masing-masing:

Gaya font. Mendefinisikan gaya teks. Mengambil nilai-nilai berikut:

Varian font. Properti ini menentukan bagaimana ejaan huruf kecil harus diinterpretasikan. Hanya memiliki dua arti:

Normal – perilaku normal.

Huruf kecil - semua huruf kecil diubah menjadi huruf besar, dan ukurannya sedikit diperkecil dibandingkan font biasa.

Berat font. Menentukan ketebalan teks. Nilainya dapat ditentukan dengan kata kunci atau nilai numerik. Mari kita lihat semua opsi:

Normal – teks normal

Tebal – teks dengan gaya tebal

Lebih berani – akan tampak lebih tebal dari elemen induknya.

Lebih ringan – huruf memiliki ketebalan yang lebih kecil dibandingkan dengan induknya.

Sesederhana itu. Selain itu, dimungkinkan untuk mengatur nilai dalam bentuk angka dari 100 hingga 900, dimana 900 adalah yang paling tebal. Misalnya, nilai normal sama dengan 400, dan nilai tebal sama dengan 700.

Sayangnya, sebagian besar browser tidak mengenali nilai numerik ini dan hanya dapat menggunakan dua nilai: normal dan tebal. Untuk percobaan, saya membuat 9 paragraf dan memberi bobot teks yang berbeda pada masing-masing paragraf - dari 100 hingga 900. Kemudian saya membuka halaman web ini di browser yang berbeda dan tidak ada satupun yang menampilkan gaya yang berbeda. Kesimpulan: lebih baik tidak menggunakan nilai numerik.

Ukuran font. Properti ini menentukan ukuran huruf. Ukurannya dapat ditentukan dalam berbagai nilai relatif dan absolut. Paling sering, ukuran ditentukan dalam piksel, satuan em relatif, dan persentase. Jika Anda ingin mempelajari lebih lanjut tentang mengatur ukuran di CSS, bacalah yang ini, yang semuanya dijelaskan lebih detail.

Keluarga font. Mungkin properti paling dasar yang menentukan keluarga atau nama spesifik font yang digunakan. Jika Anda menggunakan nama tertentu, Anda perlu memastikan bahwa font yang ditentukan dapat ditemukan di semua komputer pengguna. Untuk keandalan, Anda perlu menentukan opsi alternatif atau seluruh keluarga yang dipisahkan dengan koma. Font dibagi menjadi beberapa keluarga berikut:

Setiap keluarga memenuhi kebutuhan yang berbeda. Misalnya, fantasi sering digunakan untuk mendesain berbagai header, dan monospace digunakan untuk menampilkan kode mesin, dll. Anda dapat mengetahui lebih spesifik nama fontnya, misalnya di editor teks atau di Photoshop.

Notasi singkat

Segala sesuatu yang kita bahas di atas dapat dengan mudah ditulis dalam satu baris menggunakan properti font yang luar biasa, yang menyatukan semua pengaturan. Anda perlu menulisnya dengan urutan sebagai berikut:

Font: gaya font | varian font | berat font | ukuran font | keluarga font;

Font: gaya font | font - varian | font - berat | ukuran font | font - keluarga ;

Jika Anda tidak perlu menentukan parameter, parameter tersebut dihilangkan begitu saja. Hanya ukuran dan jenis font yang diperlukan di sini; yang lainnya bersifat opsional kecuali diperlukan. Menggunakan notasi singkat memungkinkan Anda mengurangi banyak kode di css. Gunakan karena ini merupakan optimasi yang baik untuk situs.

Cara mengatur font di html ke elemen yang berbeda

Jadi, untuk beberapa alasan, kami menjadi sangat terbawa dengan deskripsi semua properti font. Ini informasi yang sangat penting, tetapi bagaimana cara menanyakannya dengan benar? Gunakan pemilih yang tepat untuk mencapai elemen yang tepat. Di bawah ini saya menawarkan beberapa contoh:

p a( keluarga font: Verdana, sans-serif; )

Untuk data tabular, banyak parameter font yang disetel: huruf kapital yang diperkecil, gaya tebal, ukuran font, dan nama.

  • Sergei Savenkov

    semacam ulasan "pendek"... seolah-olah mereka sedang terburu-buru di suatu tempat